.waveform-wrapper {
    min-width: 200px;
    width: 100%;
    min-height: 71px;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.waveform-controls {
    display: flex;
    width: 100%;
    align-items: center;
}

.waveform-wrapper-with-progress {
    justify-content: space-between;
}

.waveform-wrapper-without-progress {
    justify-content: center;
    min-height: 50px;
}

.controls-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.controls-container-with-progress {}

.controls-container-without-progress {}

.controls {
    display: flex;
    align-items: center;
    width: max-content;
}

.control-button {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 1px;
    border-radius: 50%;
    margin: 1px;
}

.control-button.rewind,
.control-button.forward {
    width: 20px;
    height: 20px;
}

.rewind:hover,
.forward:hover {
    background-color: rgb(199, 195, 195);
}

.control-button.play-pause {
    width: 28px;
    height: 28px;
}

.play-pause:hover {
    background-color: rgb(175, 201, 231);
}

.waveform {
    width: 100%;
    margin: 0px 12px;
    min-height: 24px;
    align-self: center;
}

.waveform-progress-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    align-self: flex-end;
    padding: 10px 0px;
}

.waveform-skeleton {
    width: 100%;
    background: #eee;
    background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
    border-radius: 5px;
    background-size: 200% 100%;
    animation: 1.5s shine linear infinite;
    height: 100%;
    min-height: 70px;
}

@keyframes shine {
    to {
        background-position-x: -200%;
    }
}