@use '@style/theme/index.scss' as theme;
@use 'sass:string';
@use '@components/scrollbar/style/token.scss' as *;

$scroll-prefix-cls: string.unquote('#{theme.$prefix}-scrollbar');

// Scrollbar design tokens are exposed as `--sd-scrollbar-*` CSS variables so
// they can be shared with the global native-scrollbar baseline (see
// `style/normalize.scss`) and overridden at runtime. Each `--os-*` mapping
// reads the shared variable and falls back to the component token, so the
// component renders identically when the variables are not set upstream and
// stays in sync with native scrollbars when they are.
.#{$scroll-prefix-cls} {
  position: relative;
  width: 100%;
  height: 100%;

  &-container {
    min-width: 100%;
    // Fill the outer element so that when it has a bounded height the host is
    // constrained and the viewport can scroll. `height: 100%` resolves to
    // `auto` when the outer is auto-sized, so unconstrained usages are unaffected.
    height: 100%;
  }

  .os-scrollbar {
    --os-size: var(#{theme.$sd-cssvars-prefix}-scrollbar-size, #{$scrollbar-thumb-bar-size});
    --os-handle-bg: var(
      #{theme.$sd-cssvars-prefix}-scrollbar-thumb-color,
      #{$scrollbar-thumb-bar-bg_color}
    );
    --os-handle-bg-hover: var(
      #{theme.$sd-cssvars-prefix}-scrollbar-thumb-color-hover,
      #{$scrollbar-thumb-bar-bg_color_hover}
    );
    --os-handle-bg-active: var(
      #{theme.$sd-cssvars-prefix}-scrollbar-thumb-color-active,
      #{$scrollbar-thumb-bar-bg_color_active}
    );
    --os-track-bg: transparent;
    --os-track-bg-hover: transparent;
    --os-track-bg-active: transparent;
    --os-padding-axis: 0;
    --os-padding-perpendicular: 0;
    --os-handle-border-radius: var(
      #{theme.$sd-cssvars-prefix}-scrollbar-thumb-radius,
      #{$scrollbar-thumb-bar-border_radius}
    );
  }

  .os-scrollbar-handle {
    transition:
      background-color 0.16s ease,
      opacity 0.16s ease;
  }

  .#{$scroll-prefix-cls}-theme-embed {
    --os-handle-perpendicular-size: var(
      #{theme.$sd-cssvars-prefix}-scrollbar-size,
      #{$scrollbar-thumb-bar-size}
    );
    --os-handle-perpendicular-size-hover: var(
      #{theme.$sd-cssvars-prefix}-scrollbar-size,
      #{$scrollbar-thumb-bar-size}
    );
    --os-handle-perpendicular-size-active: var(
      #{theme.$sd-cssvars-prefix}-scrollbar-size,
      #{$scrollbar-thumb-bar-size}
    );
    --os-handle-interactive-area-offset: 0;
  }

  .#{$scroll-prefix-cls}-theme-track {
    --os-size: #{$scrollbar-track-size};
    --os-track-bg: #{$scrollbar-track-bg_color};
    --os-track-bg-hover: #{$scrollbar-track-bg_color};
    --os-track-bg-active: #{$scrollbar-track-bg_color};
    --os-track-border: #{$scrollbar-track-border_size} solid #{$scrollbar-track-border_color};
    --os-handle-perpendicular-size: var(
      #{theme.$sd-cssvars-prefix}-scrollbar-size,
      #{$scrollbar-thumb-bar-size}
    );
    --os-padding-axis: #{($scrollbar-track-size - $scrollbar-thumb-bar-size) * 0.5 -
      $scrollbar-track-border_size};
  }

  &#{&}-type-embed {
    .#{$scroll-prefix-cls}-theme-embed {
      --os-handle-bg: var(
        #{theme.$sd-cssvars-prefix}-scrollbar-thumb-color,
        #{$scrollbar-thumb-bar-bg_color}
      );
      --os-handle-bg-hover: var(
        #{theme.$sd-cssvars-prefix}-scrollbar-thumb-color-hover,
        #{$scrollbar-thumb-bar-bg_color_hover}
      );
      --os-handle-bg-active: var(
        #{theme.$sd-cssvars-prefix}-scrollbar-thumb-color-active,
        #{$scrollbar-thumb-bar-bg_color_active}
      );
    }
  }

  &#{&}-type-track {
    .#{$scroll-prefix-cls}-theme-track {
      --os-handle-bg: var(
        #{theme.$sd-cssvars-prefix}-scrollbar-thumb-color,
        #{$scrollbar-thumb-bar-bg_color}
      );
      --os-handle-bg-hover: var(
        #{theme.$sd-cssvars-prefix}-scrollbar-thumb-color-hover,
        #{$scrollbar-thumb-bar-bg_color_hover}
      );
      --os-handle-bg-active: var(
        #{theme.$sd-cssvars-prefix}-scrollbar-thumb-color-active,
        #{$scrollbar-thumb-bar-bg_color_active}
      );
    }
  }
}