style.scss

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

button {
    all: unset;
}

.topu-player {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;

    &__wrapper {
        max-width: 700px;
        max-height: 600px;
    }

    .audio-player {
        &__thumb-area {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        &__thumb {
            width: 100%;
            height: 100%;
        }

        &__track {
            // width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px;
        }

        &__progress {
            width: 100%;
            padding: 10px;

            &__bar {
                width: 100%;
                height: 5px;
                background: #ccc;
                border-radius: 6px;
                cursor: pointer;

                &__fill {
                    width: 50%;
                    height: 100%;
                    border-radius: inherit;
                    background: red;
                }
            }

            &__time {
                font-size: 14px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 6px 0;
            }
        }

        &__controls {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px;

            &__reset,
            &__backward,
            &__playPause,
            &__forward,
            &__prev,
            &__next {
                color: red;
                cursor: pointer;
            }
        }

        &__volume {
            padding: 10px;
        }

        // >* {
        //     .show {
        //         display: block;
        //     }

        //     .hide {
        //         display: none;
        //     }
        // }
    }

    .show {
        display: block;
    }

    .hide {
        display: none;
    }
}