.TimeLine {
    &-background {
        background: $timberwolf;
        cursor: pointer;
        height: 8px;
    }

    &-progress {
        background: var(--koala, $koala);
        height: 100%;
        max-width: 100%;
        pointer-events: none;
        width: 0%;
    }

    &-progress-active {
        background: var(--primary-ws);
    }

    &-marker {
        background: (--white, $white);
        border-radius: 50%;
        bottom: 4px;
        height: 16px;
        margin-left: calc(100% - 8px);
        position: relative;
        visibility: hidden;
        width: 16px;
    }

    &:hover &-marker {
        visibility: visible;
    }
}