/*
 * Step Flow widget.
 *
 * The line between steps is drawn by each step except the last, so it never
 * runs past the end of the flow however many steps there are.
 */
.ekl-step-flow {
    --ekl-step-marker: 56px;
    --ekl-step-connector-color: #e2e8f0;
    --ekl-step-connector-size: 2px;
    --ekl-step-connector-style: solid;
    --ekl-step-gap: 30px;

    @apply flex gap-[30px] w-full;
}

.ekl-step {
    @apply relative flex flex-1 flex-col items-center gap-[14px] text-center transition-all duration-300;
    box-sizing: border-box;
}

.ekl-step__marker {
    @apply relative z-[1] inline-flex shrink-0 items-center justify-center rounded-full bg-ekl-brand text-[20px] font-bold leading-none text-white transition-all duration-300;

    width: var(--ekl-step-marker);
    height: var(--ekl-step-marker);
    box-sizing: border-box;

    i {
        @apply block;
    }

    svg {
        @apply block h-[1em] w-[1em] fill-current;
    }

    .ekl-step__marker-img {
        @apply block h-full w-full object-cover rounded-[inherit];
    }
}

.ekl-step__body {
    @apply w-full;
}

.ekl-step__badge {
    @apply inline-block mb-[6px] text-[13px] font-semibold uppercase tracking-wider text-ekl-brand transition-colors duration-200;
}

.ekl-step__title {
    @apply m-0 text-[20px] font-bold leading-[1.3] text-ekl-secondary transition-colors duration-200;

    a {
        @apply text-inherit transition-colors duration-200 no-underline hover:text-ekl-brand;
    }
}

.ekl-step__description {
    @apply mt-[8px] text-[15px] leading-[1.6] text-ekl-neutral-700 transition-colors duration-200;
}

/* Across the page: the line runs from the marker to the next step. */
.ekl-step-flow[data-direction='horizontal'][data-connector='yes'] {
    .ekl-step:not(:last-child)::after {
        content: '';
        position: absolute;
        top: calc(var(--ekl-step-pad-top, 0px) + (var(--ekl-step-marker) / 2));
        left: calc(50% + (var(--ekl-step-marker) / 2));
        width: calc(100% + var(--ekl-step-gap, 30px) - var(--ekl-step-marker));
        transform: translateY(-50%);
        border-top: var(--ekl-step-connector-size, 2px) var(--ekl-step-connector-style, solid) var(--ekl-step-connector-color, #e2e8f0);
        z-index: 0;
        pointer-events: none;
    }
}

/* Down the page: the marker moves beside the text and the line goes under it. */
.ekl-step-flow[data-direction='vertical'] {
    @apply flex-col;

    .ekl-step {
        @apply flex-row items-start text-left;
    }

    .ekl-step__body {
        @apply flex-1;
    }

    &[data-connector='yes'] .ekl-step:not(:last-child)::after {
        content: '';
        position: absolute;
        left: calc(var(--ekl-step-pad-left, 0px) + (var(--ekl-step-marker) / 2));
        top: calc(var(--ekl-step-pad-top, 0px) + var(--ekl-step-marker));
        height: calc(100% + var(--ekl-step-gap, 30px) - var(--ekl-step-marker));
        transform: translateX(-50%);
        border-left: var(--ekl-step-connector-size, 2px) var(--ekl-step-connector-style, solid) var(--ekl-step-connector-color, #e2e8f0);
        z-index: 0;
        pointer-events: none;
    }
}

/* Side by side needs room; below that the flow reads better stacked. */
@media (max-width: 767px) {
    .ekl-step-flow[data-direction='horizontal'] {
        @apply flex-col;

        .ekl-step {
            @apply flex-row items-start text-left;
        }

        .ekl-step__body {
            @apply flex-1;
        }

        &[data-connector='yes'] .ekl-step:not(:last-child)::after {
            left: calc(var(--ekl-step-pad-left, 0px) + (var(--ekl-step-marker) / 2));
            top: calc(var(--ekl-step-pad-top, 0px) + var(--ekl-step-marker));
            width: 0;
            height: calc(100% + var(--ekl-step-gap, 30px) - var(--ekl-step-marker));
            transform: translateX(-50%);
            border-top: none;
            border-left: var(--ekl-step-connector-size, 2px) var(--ekl-step-connector-style, solid) var(--ekl-step-connector-color, #e2e8f0);
        }
    }
}