@use 'sass:map';
@use '@mezzanine-ui/system/palette' as palette;
@use '@mezzanine-ui/system/spacing' as spacing;
@use '@mezzanine-ui/system/radius' as radius;
@use '@mezzanine-ui/system/motion' as motion;
@use '@mezzanine-ui/system/transition' as transition;
@use './scrollbar' as *;

$scrollbar-thumb-color: palette.semantic-variable("scrollbar", neutral);
$scrollbar-thumb-hover-color: palette.semantic-variable("scrollbar", strong);
$scrollbar-track-hover-color: palette.semantic-variable("scrollbar", neutral-light);
$scrollbar-size: spacing.semantic-variable(size, element, tight);
$scrollbar-padding-horizontal: spacing.semantic-variable(padding, horizontal, micro);
$scrollbar-padding-vertical: spacing.semantic-variable(padding, vertical, tiny);
$scrollbar-radius: radius.variable(full);

.#{$prefix} {
  width: 100%;

  [data-overlayscrollbars-viewport] {
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .os-scrollbar {
    --os-track-border-radius: #{$scrollbar-radius};
    --os-track-bg: transparent;
    --os-track-bg-hover: #{$scrollbar-track-hover-color};
    --os-track-bg-active: #{$scrollbar-track-hover-color};
    --os-handle-border-radius: #{$scrollbar-radius};
    --os-handle-bg: #{$scrollbar-thumb-color};
    --os-handle-bg-hover: #{$scrollbar-thumb-hover-color};
    --os-handle-bg-active: #{$scrollbar-thumb-hover-color};

    transition: transition.entrance(opacity, fast),
      transition.entrance(visibility, fast);
  }

  .os-scrollbar-vertical {
    --os-size: calc(#{$scrollbar-size} + 2 * #{$scrollbar-padding-horizontal});
    --os-padding-perpendicular: #{$scrollbar-padding-horizontal};
    --os-padding-axis: #{$scrollbar-padding-vertical};
  }

  .os-scrollbar-horizontal {
    --os-size: calc(#{$scrollbar-size} + 2 * #{$scrollbar-padding-vertical});
    --os-padding-perpendicular: #{$scrollbar-padding-vertical};
    --os-padding-axis: #{$scrollbar-padding-horizontal};
  }

  .os-scrollbar-auto-hidden {
    transition: transition.exit(opacity, fast, motion.duration(long)),
      transition.exit(visibility, fast, motion.duration(long));
  }

  .os-scrollbar-handle {
    transition: transition.standard(background-color);
  }
}