/*
 * Table of Contents widget.
 */
.ekl-toc {
    @apply w-full rounded-[10px] border border-solid border-ekl-neutral-200 bg-white p-[20px];

    &[hidden] {
        @apply hidden;
    }
}

.ekl-toc__header {
    @apply mb-[12px] flex items-center justify-between gap-[12px];
}

.ekl-toc__title {
    @apply m-0 text-[18px] font-bold leading-[1.3] text-ekl-text;
}

.ekl-toc__toggle {
    @apply inline-flex h-[32px] w-[32px] shrink-0 cursor-pointer items-center justify-center rounded-[6px] border-0 bg-transparent p-0 text-ekl-text;

    &:hover {
        @apply bg-ekl-neutral-200;
    }

    &:focus-visible {
        outline: 3px solid var(--color-ekl-secondary);
        outline-offset: 2px;
    }
}

.ekl-toc__toggle-icon {
    @apply relative block h-[8px] w-[8px] -translate-y-[25%] rotate-45 border-b-2 border-r-2 border-solid border-current transition-transform duration-200;
}

.ekl-toc__toggle[aria-expanded='false'] .ekl-toc__toggle-icon {
    @apply translate-y-[25%] -rotate-[135deg];
}

.ekl-toc__body[hidden] {
    @apply hidden;
}

.ekl-toc__empty {
    @apply m-0 text-[14px] text-ekl-neutral-700;
}

.ekl-toc__list {
    @apply m-0 list-none p-0;

    li {
        @apply mb-[6px];
    }

    a {
        @apply text-[15px] leading-[1.5] text-ekl-neutral-700 no-underline transition-colors duration-200;

        &:hover {
            @apply text-ekl-brand;
        }

        &[aria-current='location'] {
            @apply font-semibold text-ekl-brand;
        }

        &:focus-visible {
            outline: 3px solid var(--color-ekl-secondary);
            outline-offset: 2px;
        }
    }
}

ol.ekl-toc__list {
    @apply list-decimal pl-[1.4em];
}

.ekl-toc__list--nested {
    @apply mt-[6px] pl-[1em];
}

ol.ekl-toc__list--nested {
    @apply list-decimal pl-[1.6em];
}

@media (prefers-reduced-motion: reduce) {
    .ekl-toc__toggle-icon,
    .ekl-toc__list a {
        transition: none;
    }
}

/*
 * A theme styles every button (Hello Elementor: crimson with white text on hover
 * and focus, nowrap, centred, a 1px border). The rules below say every state
 * outright, one class deeper than the theme's [type=button]:hover, so the
 * button looks the way this widget says whatever the theme does. A style
 * control in the panel is still more specific than these.
 * Checked against the real theme in tests/test-theme-buttons.php.
 */

.ekl-toc .ekl-toc__toggle,
.ekl-toc .ekl-toc__toggle:hover,
.ekl-toc .ekl-toc__toggle:focus,
.ekl-toc .ekl-toc__toggle:active {
    padding: 0;
    border: 0;
    border-radius: 6px;
    color: var(--color-ekl-text);
    text-decoration: none;
}

.ekl-toc .ekl-toc__toggle {
    background-color: transparent;
}

.ekl-toc .ekl-toc__toggle:hover,
.ekl-toc .ekl-toc__toggle:focus,
.ekl-toc .ekl-toc__toggle:active {
    background-color: var(--color-ekl-neutral-200);
}