/*
 * Tabs widget.
 */
.ekl-tabs {
    @apply flex w-full flex-col;
}

.ekl-tabs--vertical {
    @apply flex-row items-start gap-[24px];

    .ekl-tabs__nav {
        @apply w-[220px] shrink-0 flex-col;
    }

    .ekl-tabs__panels {
        @apply min-w-0 flex-1;
    }
}

.ekl-tabs__nav {
    @apply mb-[16px] flex flex-wrap gap-[8px];
}

.ekl-tabs--vertical .ekl-tabs__nav {
    @apply mb-0;
}

.ekl-tabs--align-center .ekl-tabs__nav {
    @apply justify-center;
}

.ekl-tabs--align-end .ekl-tabs__nav {
    @apply justify-end;
}

.ekl-tabs--align-stretch .ekl-tabs__nav .ekl-tabs__tab {
    @apply flex-1;
}

.ekl-tabs__tab {
    @apply inline-flex cursor-pointer items-center justify-center gap-[8px] rounded-[8px] border-0 bg-ekl-neutral-50 px-[20px] py-[12px] text-[15px] font-semibold leading-[1.3] text-ekl-neutral-700 transition-colors duration-200;

    font-family: inherit;

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

    &[aria-selected='true'] {
        @apply bg-ekl-hover text-white;
    }

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

.ekl-tabs__icon {
    @apply inline-flex items-center;

    i,
    svg {
        @apply block h-[1em] w-[1em];
    }

    svg {
        @apply fill-current;
    }
}

.ekl-tabs__panel {
    @apply w-full rounded-[8px];

    &[hidden] {
        @apply hidden;
    }

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

.ekl-tabs__content {
    @apply text-[16px] leading-[1.7] text-ekl-neutral-700;

    > :first-child {
        @apply mt-0;
    }

    > :last-child {
        @apply mb-0;
    }

    /* What an author writes: lists keep their markers, links look like links. */
    p {
        @apply my-[0.8em];
    }

    ul {
        @apply my-[0.8em] list-disc pl-[1.4em];
    }

    ol {
        @apply my-[0.8em] list-decimal pl-[1.6em];
    }

    li {
        @apply my-[0.3em];
    }

    a {
        @apply font-medium text-ekl-hover underline underline-offset-[3px];

        &:hover {
            color: #a82a55;
        }
    }

    img {
        @apply h-auto max-w-full rounded-[6px];
    }
}

@media (max-width: 767px) {
    .ekl-tabs--vertical {
        @apply flex-col;

        .ekl-tabs__nav {
            @apply w-full flex-row;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .ekl-tabs__tab {
        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-tabs .ekl-tabs__tab,
.ekl-tabs .ekl-tabs__tab:hover,
.ekl-tabs .ekl-tabs__tab:focus,
.ekl-tabs .ekl-tabs__tab:active {
    padding: 12px 20px;
    border: 0;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    text-transform: none;
    white-space: normal;
}

.ekl-tabs .ekl-tabs__tab {
    background-color: var(--color-ekl-neutral-50);
    color: var(--color-ekl-neutral-700);
}

.ekl-tabs .ekl-tabs__tab:hover,
.ekl-tabs .ekl-tabs__tab:focus,
.ekl-tabs .ekl-tabs__tab:active {
    background-color: var(--color-ekl-neutral-200);
    color: var(--color-ekl-text);
}

.ekl-tabs .ekl-tabs__tab[aria-selected='true'],
.ekl-tabs .ekl-tabs__tab[aria-selected='true']:hover,
.ekl-tabs .ekl-tabs__tab[aria-selected='true']:focus,
.ekl-tabs .ekl-tabs__tab[aria-selected='true']:active {
    background-color: var(--color-ekl-hover);
    color: #fff;
}