.wp-block-vules-history,
.wp-block-vules-history * {
    box-sizing: border-box;
}

.wp-block-vules-history {
    --left: 270px;
    --padding: 16px 32px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    position: relative;
}

.wp-block-vules-history::before {
    background-color: rgba(255, 255, 255, 0.25);
    content: '';
    display: block;
    position: absolute;
    left: calc(var(--left) - 2px);
    top: 0px;
    height: 100%;
    width: 4px;
}

.wp-block-vules-history .wp-block-vules-history-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    width: 100%;
}

.wp-block-vules-history .wp-block-vules-history-item .wp-block-vules-history-item-date {
    cursor: pointer;
    padding: var(--padding);
    text-align: right;
    width: var(--left);
}

.wp-block-vules-history .wp-block-vules-history-item .wp-block-vules-history-item-date>div:first-child {}

.wp-block-vules-history .wp-block-vules-history-item .wp-block-vules-history-item-date>div:last-child {
    opacity: 0.5;
    font-size: 0.75em;
}

.wp-block-vules-history .wp-block-vules-history-item .wp-block-vules-history-item-point {
    align-self: stretch;
    position: relative;
}

.wp-block-vules-history .wp-block-vules-history-item .wp-block-vules-history-item-point::before {
    box-sizing: border-box;
    content: '';
    display: block;
    border-radius: 16px;
    border: 2px solid var(--wp--preset--color--custom-logo-v-1-0);
    position: absolute;
    left: 0px;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translateX(-50%) translateY(-50%);
    transition: 0.4s background-color;
}

.wp-block-vules-history .wp-block-vules-history-item .wp-block-vules-history-item-point::after {
    background-color: var(--wp--preset--color--custom-logo-v-1-0);
    box-sizing: border-box;
    border-radius: 100px;
    content: '';
    display: block;
    position: absolute;
    left: 0px;
    top: 50%;
    width: 4px;
    height: 0px;
    transform: translateX(-50%) translateY(-50%);
    transition: 0.4s background-color, 0.4s height;
}

.wp-block-vules-history .wp-block-vules-history-item[select="true"] .wp-block-vules-history-item-point::before {
    background-color: var(--wp--preset--color--custom-logo-v-1-0);
}

.wp-block-vules-history .wp-block-vules-history-item:hover .wp-block-vules-history-item-point::before {
    background-color: var(--wp--preset--color--custom-logo-v-1-0);
}

.wp-block-vules-history .wp-block-vules-history-item:hover .wp-block-vules-history-item-point::after {
    height: 50%;
}

.wp-block-vules-history .wp-block-vules-history-item[select="true"] .wp-block-vules-history-item-point::after {
    height: 100%;
}

.wp-block-vules-history .wp-block-vules-history-item .wp-block-vules-history-item-content {
    opacity: 1;
    transform: scale(1);
    position: relative;
    /* padding: var(--padding); */
    flex-grow: 1;
    width: 0%;
    height: var(--height);
    transition: 0.8s opacity, 0.8s height, 0.8s transform;
}

.wp-block-vules-history .wp-block-vules-history-item[select="false"] .wp-block-vules-history-item-content {
    pointer-events: none;
    opacity: 0;
    transform: scale(0);
    height: 0px;
}

@media (max-width: 1080px) {
    .wp-block-vules-history {
        --left: 180px;
        --padding: 12px 24px;
    }
}

@media (max-width: 720px) {
    .wp-block-vules-history {
        --left: 135px;
        --padding: 8px 16px;
    }
}