.audio-player {
    max-width: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 20px auto;
}

.play-pause-btn {
    --size: 50px;
    background: none;
    border: none;
}

.play-pause-circle {
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: #c28939;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease;
}

.play-pause-icon {
    box-sizing: border-box;
    height: calc(var(--size) * 0.4);
    border-color: transparent transparent transparent #000000;
    transition: 100ms all ease;
    will-change: border-width;
    cursor: pointer;

    border-style: solid;
    border-width: calc(var(--size) * 0.2) 0 calc(var(--size) * 0.2) calc(var(--size) * 0.32);
    margin-left: calc(var(--size) * 0.1);
}

.play-pause-icon.playing {
    border-style: double;
    border-width: 0 0 0 calc(var(--size) * 0.32);
    margin-left: 0;
}

.waveform {
    flex-grow: 1;
}

.volume-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.volume-btn {
    width: 25px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.volume-wave {
    transition: all 0.15s ease;
}

.mute-line {
    transition: all 0.15s ease;
}

.volume-btn[data-state="high"] .wave-1,
.volume-btn[data-state="high"] .wave-2 {
    opacity: 1;
}

.volume-btn[data-state="medium"] .wave-1 {
    opacity: 1;
}

.volume-btn[data-state="medium"] .wave-2 {
    opacity: 0;
}

.volume-btn[data-state="low"] .wave-1,
.volume-btn[data-state="low"] .wave-2 {
    opacity: 0;
}

.volume-btn[data-state="muted"] .wave-1,
.volume-btn[data-state="muted"] .wave-2 {
    opacity: 0;
}

.volume-btn:not([data-state="muted"]) .mute-line {
    opacity: 0;
}

.volume-btn[data-state="muted"] .mute-line {
    opacity: 1;
}