/*
 * Ajax Search widget.
 */
.ekl-search {
    @apply relative w-full;
}

.ekl-search__label {
    @apply absolute m-[-1px] h-[1px] w-[1px] overflow-hidden whitespace-nowrap border-0 p-0;

    clip: rect(0, 0, 0, 0);
}

.ekl-search__field {
    @apply flex w-full items-stretch overflow-hidden rounded-[8px] border border-solid border-ekl-neutral-200 bg-white;

    /* Focus: the border takes the brand colour and a soft ring surrounds it. */
    &:focus-within {
        border-color: var(--color-ekl-brand);
        box-shadow: 0 0 0 3px rgb(240 14 109 / 0.22);
    }
}

.ekl-search__input {
    @apply min-w-0 flex-1 border-0 bg-transparent px-[16px] py-[12px] text-[16px] text-ekl-text;

    outline: 0;
    box-shadow: none;
    font-family: inherit;
}

.ekl-search__button {
    @apply inline-flex shrink-0 cursor-pointer items-center gap-[8px] border-0 bg-ekl-hover px-[18px] text-[15px] font-semibold text-white transition-colors duration-200;

    font-family: inherit;

    &:focus-visible {
        outline: 3px solid #fff;
        outline-offset: -5px;
    }
}

.ekl-search__button-icon {
    @apply inline-flex items-center;

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

    svg {
        @apply fill-current;
    }
}

.ekl-search__results {
    @apply absolute left-0 right-0 top-[calc(100%+6px)] z-50 overflow-hidden rounded-[8px] border border-solid border-ekl-neutral-200 bg-white text-ekl-text shadow-[0_10px_30px_rgba(0,0,0,0.15)];

    &[hidden] {
        @apply hidden;
    }
}

.ekl-search__list {
    @apply m-0 max-h-[420px] list-none overflow-y-auto p-0;
}

.ekl-search__option {
    @apply m-0 p-0;

    &[aria-selected='true'],
    &:hover {
        @apply bg-ekl-neutral-50;
    }

    /* The chosen item must show on more than a faint tint. */
    &[aria-selected='true'] {
        box-shadow: inset 4px 0 0 var(--color-ekl-brand);
    }
}

.ekl-search__link {
    @apply flex items-center gap-[12px] px-[14px] py-[10px] text-inherit no-underline;
}

.ekl-search__thumb {
    @apply h-[48px] w-[48px] shrink-0 rounded-[6px] object-cover;
}

.ekl-search__body {
    @apply flex min-w-0 flex-col;
}

.ekl-search__title {
    @apply text-[15px] font-semibold leading-[1.35];
}

.ekl-search__type {
    @apply text-[12px] uppercase tracking-[0.05em] text-ekl-neutral-700;
}

.ekl-search__excerpt {
    @apply text-[13px] leading-[1.4] text-ekl-neutral-700;
}

.ekl-search__option--all .ekl-search__link {
    @apply border-t border-solid border-ekl-neutral-200 text-[14px] font-semibold text-ekl-hover;
}

.ekl-search__status {
    @apply absolute m-[-1px] h-[1px] w-[1px] overflow-hidden whitespace-nowrap border-0 p-0;

    clip: rect(0, 0, 0, 0);
}

.ekl-search[aria-busy='true'] .ekl-search__field {
    @apply opacity-90;
}

/*
 * 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-search .ekl-search__button,
.ekl-search .ekl-search__button:hover,
.ekl-search .ekl-search__button:focus,
.ekl-search .ekl-search__button:active {
    padding: 0 18px;
    border: 0;
    border-radius: 0;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    text-transform: none;
}

.ekl-search .ekl-search__button {
    background-color: var(--color-ekl-hover);
}

.ekl-search .ekl-search__button:hover,
.ekl-search .ekl-search__button:focus,
.ekl-search .ekl-search__button:active {
    background-color: #a82a55;
}

/*
 * The theme styles the box too: Hello Elementor gives every search input a 1px
 * #666 border, rounded corners and padding of its own, which sat as a second
 * border inside the field's, and a darker border on focus. The field draws the
 * border here; the input inside is bare. Written one class deeper than the
 * theme's input[type=search]:focus.
 */
.ekl-search .ekl-search__input,
.ekl-search .ekl-search__input:hover,
.ekl-search .ekl-search__input:focus,
.ekl-search .ekl-search__input:active {
    width: auto;
    padding: 12px 16px;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    outline: 0;
}

.ekl-search .ekl-search__input::-webkit-search-cancel-button {
    cursor: pointer;
}

.ekl-search .ekl-search__link,
.ekl-search .ekl-search__link:hover,
.ekl-search .ekl-search__link:focus {
    color: inherit;
    text-decoration: none;
}

.ekl-search .ekl-search__option--all .ekl-search__link,
.ekl-search .ekl-search__option--all .ekl-search__link:hover,
.ekl-search .ekl-search__option--all .ekl-search__link:focus {
    color: var(--color-ekl-hover);
}