/*
 * Number widget.
 */
.ekl-number {
    @apply flex flex-col;
}

.ekl-number__icon {
    @apply mb-[10px] leading-none;

    i {
        @apply inline-block text-[40px] leading-none text-ekl-brand;
    }

    svg {
        @apply inline-block h-[40px] w-[40px] fill-ekl-brand;
    }
}

.ekl-number__figure {
    @apply text-[48px] font-bold leading-[1.1] text-ekl-secondary;
}

.ekl-number__title {
    @apply mt-[8px] text-[16px] leading-[1.5] text-ekl-neutral-700;
}

/*
 * Style presets. A counter has no surface of its own, so a preset gives it one:
 * a card with the figure and what it counts.
 */
.ek-number:where([class*="ekl-preset-"]) {
    .ekl-number {
        align-items: center;
        background: var(--ekl-ps-bg);
        border: var(--ekl-ps-border);
        border-radius: var(--ekl-ps-radius);
        box-shadow: var(--ekl-ps-shadow);
        padding: 28px;
        text-align: center;
    }

    .ekl-number__figure {
        color: var(--ekl-ps-fg);
    }

    .ekl-number__title {
        color: var(--ekl-ps-muted);
    }

    .ekl-number__icon {
        color: var(--ekl-ps-accent);

        i {
            color: var(--ekl-ps-accent);
        }

        svg {
            fill: var(--ekl-ps-accent);
        }
    }
}