/*
// Copyright 2024 The Lynx Authors. All rights reserved.
// Licensed under the Apache License Version 2.0 that can be found in the
// LICENSE file in the root directory of this source tree.
*/
scroll-view {
  display: flex !important;
  --lynx-display: linear !important;
  --lynx-display-toggle: var(--lynx-display-linear);
  flex-wrap: nowrap;
  flex-direction: var(--linear-flex-direction);
  justify-content: var(--linear-justify-content);
  scroll-timeline: --scroll-view-timeline;
}

/**
 * The scroll-view would always be a linear container
 * see linear.css
 */
scroll-view > *, scroll-view > lynx-wrapper > * {
  flex-shrink: 0;
  flex-grow: calc(var(--lynx-linear-weight) / var(--lynx-linear-weight-sum));
  flex-basis: var(--lynx-linear-weight-basis);
  align-self: var(--align-self-column);
}

scroll-view, scroll-view {
  scrollbar-width: none;
}

scroll-view::-webkit-scrollbar, scroll-view::-webkit-scrollbar {
  display: none;
}

scroll-view[enable-scrollbar], scroll-view[scroll-bar-enable] {
  scrollbar-width: initial;
}

scroll-view[enable-scrollbar]::-webkit-scrollbar,
scroll-view[scroll-bar-enable]::-webkit-scrollbar {
  display: initial;
}

scroll-view, scroll-view[scroll-y], scroll-view[scroll-orientation="vertical"] {
  overflow-y: scroll !important;
  overflow-x: clip !important;
  flex-direction: column !important;
  --lynx-linear-orientation: vertical !important;
  --lynx-linear-orientation-toggle: var(--lynx-linear-orientation-vertical);
}

scroll-view[scroll-x], scroll-view[scroll-orientation="horizontal"] {
  overflow-y: clip !important;
  overflow-x: scroll !important;
  flex-direction: row !important;
  --lynx-linear-orientation: horizontal !important;
  --lynx-linear-orientation-toggle: var(--lynx-linear-orientation-horizontal);
}

scroll-view[scroll-orientation="both"] {
  overflow: scroll !important;
}

@supports not (overflow: clip) {
  scroll-view[scroll-y], scroll-view[scroll-orientation="vertical"] {
    overflow-x: hidden;
  }

  scroll-view[scroll-x], scroll-view[scroll-orientation="horizontal"] {
    overflow-y: hidden;
  }
}

scroll-view[scroll-y][enable-scroll="false"],
scroll-view[scroll-orientation="vertical"][enable-scroll="false"] {
  overflow-y: hidden !important;
}

scroll-view[scroll-x][enable-scroll="false"],
scroll-view[scroll-orientation="horizontal"][enable-scroll="false"] {
  overflow-x: hidden !important;
}

@supports (animation-timeline: --scroll-view-timeline) {
  /* 
    https://chromestatus.com/feature/6752840701706240 It notes that this feature is actively implementing in webkit and gecko.
    chrome 115, firefox no, safari no
  */
  scroll-view[fading-edge-length]::part(top-fade-mask) {
    top: 0;
    animation-name: topFading;
  }
  scroll-view[fading-edge-length]::part(bot-fade-mask) {
    bottom: 0;
    animation-name: botFading;
  }
  scroll-view[fading-edge-length]::part(top-fade-mask),
  scroll-view[fading-edge-length]::part(bot-fade-mask) {
    left: 0;
    display: flex;
    flex: 0 0 auto;
    animation-duration: 1ms;
    animation-timeline: --scroll-view-timeline;
  }
}

scroll-view[x-enable-scrolltolower-event]::part(lower-threshold-observer),
scroll-view[x-enable-scrolltoupper-event]::part(upper-threshold-observer) {
  display: flex;
}

scroll-view[scroll-y][x-enable-scrolltolower-event]::part(lower-threshold-observer),
scroll-view[scroll-orientation="vertical"][x-enable-scrolltolower-event]::part(lower-threshold-observer) {
  flex-direction: column-reverse !important;
}

scroll-view[scroll-x][x-enable-scrolltolower-event]::part(lower-threshold-observer),
scroll-view[scroll-orientation="horizontal"][x-enable-scrolltolower-event]::part(lower-threshold-observer) {
  flex-direction: row-reverse !important;
}