/*
 * Off-canvas widget.
 */
.ekl-oc-wrap {
    @apply flex w-full;
}

.ekl-oc__button {
    @apply inline-flex cursor-pointer items-center gap-[10px] rounded-[8px] border-0 bg-ekl-hover px-[20px] py-[12px] text-[15px] font-semibold leading-none text-white transition-colors duration-200;

    font-family: inherit;

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

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

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

    svg {
        @apply fill-current;
    }
}

/* The panel sits over everything; fixed, so it is the window it fills. */
.ekl-oc {
    @apply fixed inset-0 z-[99999];

    &[hidden] {
        @apply hidden;
    }
}

.ekl-oc__overlay {
    @apply absolute inset-0 bg-black/55 opacity-0 transition-opacity duration-300;
}

.ekl-oc.is-open .ekl-oc__overlay {
    @apply opacity-100;
}

.ekl-oc__panel {
    @apply absolute bottom-0 top-0 flex w-[380px] max-w-full flex-col overflow-y-auto bg-white text-ekl-text shadow-[0_0_40px_rgba(0,0,0,0.25)] transition-transform duration-300 ease-out;

    outline: 0;
}

.ekl-oc--left .ekl-oc__panel {
    @apply left-0 -translate-x-full;
}

.ekl-oc--right .ekl-oc__panel {
    @apply right-0 translate-x-full;
}

.ekl-oc.is-open .ekl-oc__panel {
    @apply translate-x-0;
}

.ekl-oc__close {
    @apply absolute right-[12px] top-[10px] z-10 inline-flex h-[36px] w-[36px] cursor-pointer items-center justify-center rounded-full border-0 bg-transparent p-0 text-[26px] leading-none text-current;

    &:hover {
        @apply bg-black/10;
    }

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

.ekl-oc__title {
    @apply px-[24px] pb-0 pr-[56px] pt-[20px] text-[20px] font-bold leading-[1.3];
}

.ekl-oc__body {
    @apply p-[24px];

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

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

body.ekl-oc-open {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .ekl-oc__overlay,
    .ekl-oc__panel,
    .ekl-oc__button {
        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-oc-wrap .ekl-oc__button,
.ekl-oc-wrap .ekl-oc__button:hover,
.ekl-oc-wrap .ekl-oc__button:focus,
.ekl-oc-wrap .ekl-oc__button:active {
    padding: 12px 20px;
    border: 0;
    border-radius: 8px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    text-transform: none;
}

.ekl-oc-wrap .ekl-oc__button {
    background-color: var(--color-ekl-hover);
}

.ekl-oc-wrap .ekl-oc__button:hover,
.ekl-oc-wrap .ekl-oc__button:focus,
.ekl-oc-wrap .ekl-oc__button:active {
    background-color: #a82a55;
}

.ekl-oc .ekl-oc__close,
.ekl-oc .ekl-oc__close:hover,
.ekl-oc .ekl-oc__close:focus,
.ekl-oc .ekl-oc__close:active {
    padding: 0;
    border: 0;
    border-radius: 9999px;
    color: inherit;
    font-size: 26px;
    line-height: 1;
    text-decoration: none;
}

.ekl-oc .ekl-oc__close {
    background-color: transparent;
}

.ekl-oc .ekl-oc__close:hover,
.ekl-oc .ekl-oc__close:focus,
.ekl-oc .ekl-oc__close:active {
    background-color: rgba(0, 0, 0, 0.1);
}