@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 { 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(); } } }