@mixin input-range {
  -webkit-appearance: none;
  outline: none;
  border: none;
  padding: 0;
  background: none;

  &::-webkit-slider-runnable-track {
    background-color: $Audio-track-bg;
    height: $Audio-track-height;
    border-radius: $Audio-track-borderRadius;
    border: $Audio-track-border;
  }

  &::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    border-radius: 100%;
    cursor: pointer;
    background: $Audio-thumb-bg;
    width: $Audio-thumb-width;
    height: $Audio-thumb-height;
    margin-top: $Audio-thumb-marginTop;
  }
}

@mixin svg {
  width: $Audio-svg-width;
  height: $Audio-svg-height;
  position: relative;
  top: $Audio-svg-top;
}

.#{$ns}Audio-original {
  display: none;
}

.#{$ns}Audio--inline {
  display: inline-block;
}

.#{$ns}Audio {
  box-sizing: border-box;
  height: $Audio-height;
  line-height: $Audio-lineHeight;
  border: $Audio-border;
  padding-left: $Audio-item-margin;
  overflow: hidden;

  &-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  &-rates {
    width: $Audio-rate-width;
    height: $Audio-rate-height;
    text-align: center;
    background: $Audio-rate-bg;
    cursor: pointer;
    margin-right: $Audio-item-margin;
  }

  &-rateControl {
    margin-right: $Audio-item-margin;

    &::after {
      clear: both;
      content: '';
    }

    .#{$ns}Audio-rateControlItem {
      width: $Audio-rate-width;
      height: $Audio-rate-height;
      background: $Audio-rate-bg;
      cursor: pointer;
      text-align: center;
      float: left;
      box-sizing: border-box;
      border-right: $Audio-rateControlItem-borderRight;
    }
  }

  &-play {
    width: $Audio-play-width;
    cursor: pointer;
    margin-right: $Audio-item-margin;

    svg {
      @include svg();
    }
  }

  &-times {
    min-width: $Audio-times-width;
    margin-right: $Audio-item-margin;
    cursor: default;
    flex-shrink: 0;
  }

  &-process {
    flex: auto;
    cursor: pointer;
    min-width: $Audio-process-minWidth;
    margin-right: $Audio-item-margin;

    input[type='range'] {
      @include input-range();
    }
  }

  &-volume {
    width: $Audio-volume-width;
    height: $Audio-volume-height;
    line-height: $Audio-volume-lineHeight;
    cursor: pointer;
    margin-right: $Audio-item-margin;

    svg {
      @include svg();
    }
  }

  &-volumeControl {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: $Audio-volumeControl-width;
    height: $Audio-volume-height;
    line-height: $Audio-volume-lineHeight;
    margin-right: $Audio-item-margin;

    input[type='range'] {
      @include input-range();
    }

    .#{$ns}Audio-volumeControlIcon {
      margin-right: $Audio-item-margin;
      cursor: pointer;
    }

    svg {
      @include svg();
    }
  }
}