@use "lib/mixins";
@use "settings/controls";
@use "settings/progress";
@use "settings/sliders";

// --------------------------------------------------------------
// Audio styles
// --------------------------------------------------------------

// Container
.plyr--audio {
  display: block;
}

// Controls container
.plyr--audio .plyr__controls {
  background: controls.$plyr-audio-controls-background;
  border-radius: inherit;
  color: controls.$plyr-audio-control-color;
  padding: controls.$plyr-control-spacing;
}

// Control elements
.plyr--audio .plyr__control {
  &.plyr__tab-focus,
  &:hover,
  &[aria-expanded='true'] {
    background: controls.$plyr-audio-control-background-hover;
    color: controls.$plyr-audio-control-color-hover;
  }
}

// Range inputs
.plyr--full-ui.plyr--audio input[type='range'] {
  &::-webkit-slider-runnable-track {
    background-color: sliders.$plyr-audio-range-track-background;
  }

  &::-moz-range-track {
    background-color: sliders.$plyr-audio-range-track-background;
  }

  &::-ms-track {
    background-color: sliders.$plyr-audio-range-track-background;
  }

  // Pressed styles
  &:active {
    &::-webkit-slider-thumb {
      @include mixins.plyr-range-thumb-active(sliders.$plyr-audio-range-thumb-active-shadow-color);
    }

    &::-moz-range-thumb {
      @include mixins.plyr-range-thumb-active(sliders.$plyr-audio-range-thumb-active-shadow-color);
    }

    &::-ms-thumb {
      @include mixins.plyr-range-thumb-active(sliders.$plyr-audio-range-thumb-active-shadow-color);
    }
  }
}

// Progress
.plyr--audio .plyr__progress__buffer {
  color: progress.$plyr-audio-progress-buffered-background;
}