style.scss

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
    background: linear-gradient(to bottom right, #ea64ff, #484900);
}

.audio-player {
    height: 50px;
    width: 350px;
    // background: #444;
    // box-shadow: 0 0 20px 0 #000a;
    color: white;
    font-size: 0.75em;
    overflow: hidden;

    // display: grid;
    // grid-template-rows: 6px auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    .toggle-play {
        &.play {
            cursor: pointer;
            position: relative;
            left: 0;
            height: 0;
            width: 0;
            border: 7px solid #0000;
            border-left: 13px solid white;

            &:hover {
                transform: scale(1.1);
            }
        }

        &.pause {
            height: 15px;
            width: 20px;
            cursor: pointer;
            position: relative;

            &:before {
                position: absolute;
                top: 0;
                left: 0px;
                background: white;
                content: "";
                height: 15px;
                width: 3px;
            }

            &:after {
                position: absolute;
                top: 0;
                right: 8px;
                background: white;
                content: "";
                height: 15px;
                width: 3px;
            }

            &:hover {
                transform: scale(1.1);
            }
        }
    }

    .timeline {
        background: white;
        width: 100%;
        height: 7px;
        position: relative;
        cursor: pointer;
        border-radius: 16px;
        // box-shadow: 0 2px 10px 0 #0008;

        .progress {
            background: coral;
            width: 0%;
            height: 100%;
            transition: 0.25s;
            border-radius: inherit;
        }
    }

    .controls {
        width: 100%;
    }

    // .controls {
    // display: flex;
    // justify-content: space-between;
    // align-items: stretch;
    // padding: 0 20px;

    // >* {
    //     display: flex;
    //     justify-content: center;
    //     align-items: center;
    // }

    // .toggle-play {
    //     &.play {
    //         cursor: pointer;
    //         position: relative;
    //         left: 0;
    //         height: 0;
    //         width: 0;
    //         border: 7px solid #0000;
    //         border-left: 13px solid white;

    //         &:hover {
    //             transform: scale(1.1);
    //         }
    //     }

    //     &.pause {
    //         height: 15px;
    //         width: 20px;
    //         cursor: pointer;
    //         position: relative;

    //         &:before {
    //             position: absolute;
    //             top: 0;
    //             left: 0px;
    //             background: white;
    //             content: "";
    //             height: 15px;
    //             width: 3px;
    //         }

    //         &:after {
    //             position: absolute;
    //             top: 0;
    //             right: 8px;
    //             background: white;
    //             content: "";
    //             height: 15px;
    //             width: 3px;
    //         }

    //         &:hover {
    //             transform: scale(1.1);
    //         }
    //     }
    // }

    .time-and-volume {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .time {
        width: 100%;
        display: flex;
        justify-content: space-between;

        >* {
            padding: 2px;
        }
    }

    .volume-container {
        cursor: pointer;

        .volume-button {
            height: 26px;
            display: flex;
            align-items: center;

            // .volume {
            //     // transform: scale(0.7);
            // }
        }

        position: relative;
        z-index: 2;

        .volume-slider {
            position: absolute;
            left: -3px;
            top: 15px;
            z-index: -1;
            width: 0;
            height: 5px;
            background: white;
            // box-shadow: 0 0 20px #000a;
            transition: .25s;

            .volume-percentage {
                background: coral;
                height: 100%;
                width: 75%;
            }
        }

        &:hover {
            .volume-slider {
                left: -123px;
                width: 120px;
            }
        }
    }

    // }
}