.player-seek_bar {
    z-index: 330;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    align-self: center;

    width: 90%;
    height: 100%;

    margin: 20px 0 10px 0;

    border-radius: 8px;

    transition: all 150ms ease-in-out;

    &.hidden {
        height: 0px;
        opacity: 0;
        pointer-events: none;
    }

    .progress {
        width: 100%;
        height: 100%;

        transition: all 150ms ease-in-out;

        &.hidden {
            opacity: 0;
            height: 0;
            pointer-events: none;
        }
    }

    .timers {
        display: inline-flex;
        flex-direction: row;

        width: 100%;
        height: fit-content;

        justify-content: space-between;
        align-items: center;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span {
        color: var(--text-color);
    }
}