.seek-bar-container {
    display: flex;
    flex-direction: row;
    align-items: center;

    .label {
        font-size: calc(var(--seek-bar-thumb-size) * 0.7);
        color: var(--color-surfacelight);
    }

    .slider {
        --thumb-size: var(--seek-bar-thumb-size);
        --track-size: calc(var(--seek-bar-thumb-size) * 0.2);
        --track-color: var(--color-primarydark);
        --thumb-color: var(--color-primary);
        flex: 1;
        align-self: stretch;
        margin: 0 var(--seek-bar-thumb-size);
    }

    &:hover, &.active {
        .label {
            color: var(--color-surfacelighter);
        }

        .slider {
            --thumb-color: var(--color-primarylight);
        }
    }
}