/*
 * Advanced Divider widget.
 *
 * Every kind of line is made of the same two variables (--ekl-line, --ekl-weight),
 * so the panel's colour and thickness work for all of them. The default grey
 * (#8c8f94) is 3.3:1 on white, over the 3:1 a graphic needs.
 */
.ekl-divider {
    --ekl-line: #8c8f94;
    --ekl-weight: 2px;

    @apply flex w-full items-center;
}

.ekl-divider__line {
    @apply block flex-1;

    border-top: var(--ekl-weight) solid var(--ekl-line);
}

.ekl-divider--dashed .ekl-divider__line {
    border-top-style: dashed;
}

.ekl-divider--dotted .ekl-divider__line {
    border-top-style: dotted;
}

.ekl-divider--double .ekl-divider__line {
    border-top-style: double;
    border-top-width: calc(var(--ekl-weight) * 2 + 1px);
}

.ekl-divider--fade .ekl-divider__line {
    height: var(--ekl-weight);
    border-top: 0;
    background: linear-gradient(90deg, transparent, var(--ekl-line), transparent);
}

.ekl-divider--with-middle {
    gap: 16px;
}

.ekl-divider__middle {
    @apply inline-flex shrink-0 items-center text-[16px] leading-[1.4] text-ekl-text;
}

.ekl-divider__middle i,
.ekl-divider__middle svg {
    @apply block;
}

.ekl-divider__middle svg {
    @apply h-[1em] w-[1em] fill-current;
}