.cyonect-timeline-entry {
    --cyonect-timeline-dot-size: 24px;
    --cyonect-timeline-content-gap: 24px;
    --cyonect-timeline-line-color: currentColor;

    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-width: min(200px, 75vw);
    flex-grow: 0;
    flex-shrink: 1;

    /* fix editor overlay: move to center */
    > .elementor-element-overlay {
        inset-block-end: 0;
        inset-inline-start: 0;
    }

    /* disable add widgets */
    .elementor-empty-view {
        display: none;
    }
}

.cyonect-timeline-entry-line {
    position: relative;
    height: var(--cyonect-timeline-dot-size); /* dot padding */

    /* line itself */
    &::before {
        content: "";
        position: absolute;
        display: block;
        background-color: var(--cyonect-timeline-line-color);
        height: var(--cyonect-timeline-line-thickness);
        width: 100%;
        inset-block-start: 50%;
        transform: translate(0, -50%);
    }
}

.cyonect-timeline-entry-dot {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0;
    width: var(--cyonect-timeline-dot-size);
    height: var(--cyonect-timeline-dot-size);
    border-radius: 50%;
    border: 4px solid white;
    background-color: var(--cyonect-timeline-line-color);
    transform: translate(0, -50%);
    z-index: 1;
}

.cyonect-timeline-entry-placeholder,
.cyonect-timeline-entry-content {
    display: flex;
    flex-direction: column;
    padding: 4px;
    border-radius: 2px;
}

.cyonect-timeline-entry-title {
    display: flex;
    align-items: flex-end;
    overflow: auto;
    height: 2.8em;
}

.cyonect-timeline-entry-description {
    display: block;
    overflow: auto;
    height: 6em;
}

/* Alternate content placement around the line */
.cyonect-timeline-entry:nth-child(odd) {
    flex-direction: column-reverse;
}