@use "lib/css-vars";
@use "settings/colors";
@use "settings/progress";

// ==========================================================================
// Sliders
// ==========================================================================

// Thumb
$plyr-range-thumb-height: css-vars.var(--plyr-range-thumb-height, 13px) !default;
$plyr-range-thumb-background: css-vars.var(--plyr-range-thumb-background, #fff) !default;
$plyr-range-thumb-shadow: css-vars.var(
  --plyr-range-thumb-shadow,
  0 1px 1px rgba(colors.$plyr-color-gray-900, 0.15),
  0 0 0 1px rgba(colors.$plyr-color-gray-900, 0.2)
) !default;

// Active state
$plyr-range-thumb-active-shadow-width: css-vars.var(--plyr-range-thumb-active-shadow-width, 3px) !default;

// Track
$plyr-range-track-height: css-vars.var(--plyr-range-track-height, 3px) !default;

// Fill
$plyr-range-fill-background: css-vars.var(--plyr-range-fill-background, css-vars.var(--plyr-color-main, colors.$plyr-color-main)) !default;

// Type specific
$plyr-video-range-track-background: css-vars.var(
  --plyr-video-range-track-background,
  progress.$plyr-video-progress-buffered-background
) !default;
$plyr-video-range-thumb-active-shadow-color: css-vars.var(
  --plyr-audio-range-thumb-active-shadow-color,
  rgba(#fff, 0.5)
) !default;

$plyr-audio-range-track-background: css-vars.var(
  --plyr-audio-range-track-background,
  progress.$plyr-audio-progress-buffered-background
) !default;
$plyr-audio-range-thumb-active-shadow-color: css-vars.var(
  --plyr-audio-range-thumb-active-shadow-color,
  rgba(colors.$plyr-color-gray-900, 0.1)
) !default;