/*! Copyright 2026 Fonticons, Inc. - https://webawesome.com/license */
import { css } from "lit";
var scroller_styles_default = css`:host {
  --shadow-color: var(--wa-color-surface-default);
  --shadow-size: 2rem;
  --start-shadow-opacity: 0;
  --end-shadow-opacity: 0;
  display: block;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  isolation: isolate;
}
:host([orientation="vertical"]) {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#content {
  z-index: 1;
  border-radius: inherit;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  -webkit-text-size-adjust: 100%;
}
#content:focus {
  outline: none;
}
#content:focus-visible {
  outline: var(--wa-focus-ring);
  outline-offset: var(--wa-focus-ring-offset);
}
:host([without-scrollbar]) #content {
  scrollbar-width: none;
}
:host([orientation="horizontal"]) #content {
  overflow-x: auto;
  overflow-y: hidden;
}
:host([orientation="vertical"]) #content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
#start-shadow,
#end-shadow {
  z-index: 2;
}
#start-shadow {
  opacity: var(--start-shadow-opacity);
}
#end-shadow {
  opacity: var(--end-shadow-opacity);
}
:host([orientation="horizontal"]) #start-shadow,
:host([orientation="horizontal"]) #end-shadow {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--shadow-size);
  pointer-events: none;
}
:host([orientation="horizontal"]) #start-shadow:dir(ltr) {
  left: 0;
  background:
    linear-gradient(
      to right,
      var(--shadow-color),
      transparent 100%);
}
:host([orientation="horizontal"]) #start-shadow:dir(rtl) {
  right: 0;
  background:
    linear-gradient(
      to left,
      var(--shadow-color),
      transparent 100%);
}
:host([orientation="horizontal"]) #end-shadow:dir(ltr) {
  right: 0;
  background:
    linear-gradient(
      to left,
      var(--shadow-color),
      transparent 100%);
}
:host([orientation="horizontal"]) #end-shadow:dir(rtl) {
  left: 0;
  background:
    linear-gradient(
      to right,
      var(--shadow-color),
      transparent 100%);
}
:host([orientation="vertical"]) #start-shadow,
:host([orientation="vertical"]) #end-shadow {
  position: absolute;
  right: 0;
  left: 0;
  height: var(--shadow-size);
  pointer-events: none;
}
:host([orientation="vertical"]) #start-shadow {
  top: 0;
  background:
    linear-gradient(
      to bottom,
      var(--shadow-color),
      transparent 100%);
}
:host([orientation="vertical"]) #end-shadow {
  bottom: 0;
  background:
    linear-gradient(
      to top,
      var(--shadow-color),
      transparent 100%);
}
`;
export {
  scroller_styles_default as default
};
