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

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

  &.plyr--is-touch {
    .plyr__progress__container {
      padding: 0 16px;
    }

    .plyr__controls__buttons {
      padding: 0 8px 6px;
    }
  }
}

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

  &__buttons {
    padding: 0;
  }
}

// Control elements
.plyr--audio:not(.plyr--is-touch) .plyr__control {
  svg {
    transition: 0.2s;
  }

  &.plyr__tab-focus,
  &:hover,
  &[aria-expanded='true'] {
    svg {
      fill: $plyr-audio-control-color-hover;
    }
  }
}

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

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

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

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

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

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

// Progress
.plyr--audio {
  .plyr__progress input[type='range'] {
    &::-webkit-slider-runnable-track {
      border-radius: calc(#{$plyr-range-track-height} / 2);;
    }
  }

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