amis2/scss/components/_audio.scss

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