.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%;
    }
}
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9zdHlsZXMuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBIiwiZmlsZSI6InN0eWxlcy5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIud2F2ZWZvcm0td3JhcHBlciB7XHJcbiAgICBtaW4td2lkdGg6IDIwMHB4O1xyXG4gICAgd2lkdGg6IDEwMCU7XHJcbiAgICBtaW4taGVpZ2h0OiA3MXB4O1xyXG4gICAgZGlzcGxheTogZmxleDtcclxuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XHJcbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xyXG59XHJcblxyXG4ud2F2ZWZvcm0tY29udHJvbHMge1xyXG4gICAgZGlzcGxheTogZmxleDtcclxuICAgIHdpZHRoOiAxMDAlO1xyXG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcclxufVxyXG5cclxuLndhdmVmb3JtLXdyYXBwZXItd2l0aC1wcm9ncmVzcyB7XHJcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XHJcbn1cclxuXHJcbi53YXZlZm9ybS13cmFwcGVyLXdpdGhvdXQtcHJvZ3Jlc3Mge1xyXG4gICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XHJcbiAgICBtaW4taGVpZ2h0OiA1MHB4O1xyXG59XHJcblxyXG4uY29udHJvbHMtY29udGFpbmVyIHtcclxuICAgIGRpc3BsYXk6IGZsZXg7XHJcbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xyXG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcclxuICAgIGdhcDogNHB4O1xyXG59XHJcblxyXG4uY29udHJvbHMtY29udGFpbmVyLXdpdGgtcHJvZ3Jlc3Mge31cclxuXHJcbi5jb250cm9scy1jb250YWluZXItd2l0aG91dC1wcm9ncmVzcyB7fVxyXG5cclxuLmNvbnRyb2xzIHtcclxuICAgIGRpc3BsYXk6IGZsZXg7XHJcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xyXG4gICAgd2lkdGg6IG1heC1jb250ZW50O1xyXG59XHJcblxyXG4uY29udHJvbC1idXR0b24ge1xyXG4gICAgZGlzcGxheTogZmxleDtcclxuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XHJcbiAgICBjdXJzb3I6IHBvaW50ZXI7XHJcbiAgICBwYWRkaW5nOiAxcHg7XHJcbiAgICBib3JkZXItcmFkaXVzOiA1MCU7XHJcbiAgICBtYXJnaW46IDFweDtcclxufVxyXG5cclxuLmNvbnRyb2wtYnV0dG9uLnJld2luZCxcclxuLmNvbnRyb2wtYnV0dG9uLmZvcndhcmQge1xyXG4gICAgd2lkdGg6IDIwcHg7XHJcbiAgICBoZWlnaHQ6IDIwcHg7XHJcbn1cclxuXHJcbi5yZXdpbmQ6aG92ZXIsXHJcbi5mb3J3YXJkOmhvdmVyIHtcclxuICAgIGJhY2tncm91bmQtY29sb3I6IHJnYigxOTksIDE5NSwgMTk1KTtcclxufVxyXG5cclxuLmNvbnRyb2wtYnV0dG9uLnBsYXktcGF1c2Uge1xyXG4gICAgd2lkdGg6IDI4cHg7XHJcbiAgICBoZWlnaHQ6IDI4cHg7XHJcbn1cclxuXHJcbi5wbGF5LXBhdXNlOmhvdmVyIHtcclxuICAgIGJhY2tncm91bmQtY29sb3I6IHJnYigxNzUsIDIwMSwgMjMxKTtcclxufVxyXG5cclxuLndhdmVmb3JtIHtcclxuICAgIHdpZHRoOiAxMDAlO1xyXG4gICAgbWFyZ2luOiAwcHggMTJweDtcclxuICAgIG1pbi1oZWlnaHQ6IDI0cHg7XHJcbiAgICBhbGlnbi1zZWxmOiBjZW50ZXI7XHJcbn1cclxuXHJcbi53YXZlZm9ybS1wcm9ncmVzcy13cmFwcGVyIHtcclxuICAgIHdpZHRoOiAxMDAlO1xyXG4gICAgZGlzcGxheTogZmxleDtcclxuICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XHJcbiAgICBhbGlnbi1zZWxmOiBmbGV4LWVuZDtcclxuICAgIHBhZGRpbmc6IDEwcHggMHB4O1xyXG59XHJcblxyXG4ud2F2ZWZvcm0tc2tlbGV0b24ge1xyXG4gICAgd2lkdGg6IDEwMCU7XHJcbiAgICBiYWNrZ3JvdW5kOiAjZWVlO1xyXG4gICAgYmFja2dyb3VuZDogbGluZWFyLWdyYWRpZW50KDExMGRlZywgI2VjZWNlYyA4JSwgI2Y1ZjVmNSAxOCUsICNlY2VjZWMgMzMlKTtcclxuICAgIGJvcmRlci1yYWRpdXM6IDVweDtcclxuICAgIGJhY2tncm91bmQtc2l6ZTogMjAwJSAxMDAlO1xyXG4gICAgYW5pbWF0aW9uOiAxLjVzIHNoaW5lIGxpbmVhciBpbmZpbml0ZTtcclxuICAgIGhlaWdodDogMTAwJTtcclxuICAgIG1pbi1oZWlnaHQ6IDcwcHg7XHJcbn1cclxuXHJcbkBrZXlmcmFtZXMgc2hpbmUge1xyXG4gICAgdG8ge1xyXG4gICAgICAgIGJhY2tncm91bmQtcG9zaXRpb24teDogLTIwMCU7XHJcbiAgICB9XHJcbn0iXX0= */