.player-wrapper .controls-wrapper {
    margin: 0 1rem;
    --yellow-play-button-color: #fed42b;
    align-items: center;
    display: flex;
    /* gap: 2rem; */
    justify-content: center;
    margin-block-start: 2.5rem;
}

.player-wrapper .controls-wrapper .button-container {
    align-items: center;
    display: flex;
    height: 100%;
    min-width: 2.5rem;
    width: 100%;
}

.player-wrapper .controls-wrapper .button-container:first-child {
    justify-content: start;
}

.player-wrapper .controls-wrapper .button-container:last-child {
    justify-content: end;
}

.player-wrapper .controls-wrapper .sonata-buttons {
    align-items: center;
    display: flex;
    gap: 26px;
}

.player-wrapper .button-container button {
    background: none;
    color: var(--text-color, hsla(0, 0%, 100%, .75));
    /* color: var(--text-enabled-color); */
    outline: none;
    border: none;
    border-radius: 50%;
    padding: 0;
    padding-block-end: .625rem;
    padding-block-start: .625rem;
    /* padding-inline-end: .625rem;
    padding-inline-start: .625rem; */
}

.player-wrapper .button-container span {
    align-items: center;
    display: flex;
}

.player-wrapper .button-container svg {
    height: 1.5rem;
    width: 1.5rem;
    flex-shrink: 0;
}

.player-wrapper .sonata-buttons button {
    align-items: center;
    -webkit-backdrop-filter: initial;
    backdrop-filter: none;
    /* color: #fff; */
    color: var(--text-color, #fff);
    display: flex;
    justify-content: center;
    background: none;
    outline: none;
    border: none;
    border-radius: 50%;
    padding: 0;
}

.player-wrapper .sonata-buttons button:not(.play-button) {
    padding-block-end: .75rem;
    padding-block-start: .75rem;
    padding-inline-end: .75rem;
    padding-inline-start: .75rem;
}

.player-wrapper .sonata-buttons button span {
    align-items: center;
    display: flex;
}

.player-wrapper .sonata-buttons button.play-button span {
    justify-content: center;
}

.player-wrapper .sonata-buttons button:not(.play-button) svg {
    height: 1.5rem;
    width: 1.5rem;
    flex-shrink: 0;
}

.player-wrapper .sonata-buttons button.play-button svg {
    height: 4rem;
    width: 4rem;
    /* color: var(--yellow-play-button-color, #fff); */
    color: var(--text-color, #fed42b);
    flex-shrink: 0;
}