@use "sb-element/core/theming";
/*****************************************************************************
Slider / Theme
******************************************************************************/

// Helper
@mixin style-thumbs {
  &::-webkit-slider-thumb {@content;}
  &::-moz-range-thumb {@content;}
  &::-ms-thumb {@content;}
}

// Helper
@mixin style-tracks {
  &::-webkit-slider-runnable-track {@content;}
  &::-moz-range-track {@content;}
  &::-ms-track {@content;}
  &::-ms-fill-lower {@content;}
  &::-ms-fill-upper {@content;}
}

// THEME
@mixin theme($theme) {
  @include theming.for-each-color($theme) using ($color) {
    .sb-slider.sb--#{$color} {
      input {
        @include style-thumbs {
          background: theming.get-color($theme, $color);
        }

        @include style-tracks {
          background: theming.get-color-inverted($theme, $color);
        }
      }
    }
  }
}