/*
 * Flip Box widget.
 *
 * Two faces stacked on one card that turns. Which way it turns is a data
 * attribute rather than a class per direction, so the four cases stay together.
 */
.ekl-flip-box {
    @apply relative w-full;

    perspective: 1000px;
}

.ekl-flip-box--click {
    cursor: pointer;
    user-select: none;
}

.ekl-flip-box--3d {
    perspective: 1200px;

    .ekl-flip-box__side {
        transform-style: preserve-3d;
    }

    .ekl-flip-box__icon,
    .ekl-flip-box__image,
    .ekl-flip-box__title,
    .ekl-flip-box__description,
    .ekl-flip-box__button,
    .ekl-flip-box__template {
        transform: translateZ(45px);
        transition: transform 0.3s ease;
    }
}

.ekl-flip-box--auto {
    height: auto !important;

    .ekl-flip-box__inner {
        display: grid;
        grid-template-areas: 'card-side';
        height: auto;
    }

    .ekl-flip-box__side {
        position: relative;
        grid-area: card-side;
        height: 100%;
    }
}

.ekl-flip-box__inner {
    @apply relative h-full w-full transition-transform ease-in-out;

    transform-style: preserve-3d;
}

.ekl-flip-box__side {
    @apply absolute inset-0 flex flex-col items-center justify-center gap-[12px] overflow-hidden p-[30px] text-center;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.ekl-flip-box__template {
    @apply w-full h-full;
}

.ekl-flip-box__no-template {
    @apply flex items-center justify-center w-full h-full text-[15px] font-medium opacity-70;
}

.ekl-flip-box__front {
    @apply bg-ekl-neutral-50 text-ekl-secondary;
}

.ekl-flip-box__back {
    @apply bg-ekl-secondary text-white;
}

.ekl-flip-box__title {
    @apply m-0 text-[22px] font-bold leading-[1.3];
}

.ekl-flip-box__description {
    @apply m-0 text-[16px] leading-[1.6];
}

.ekl-flip-box__icon {
    @apply leading-none;

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

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

.ekl-flip-box__image img {
    @apply block h-auto max-w-full;
}

.ekl-flip-box__button {
    @apply mt-[6px] inline-flex items-center justify-center rounded-[6px] bg-ekl-hover px-[24px] py-[12px] text-[15px] font-semibold leading-none text-white no-underline transition-all duration-300 hover:bg-[#a82a55] hover:text-white cursor-pointer;

    text-decoration: none;
}

.ekl-flip-box__button:hover {
    text-decoration: none;
}

.ekl-flip-box__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.ekl-flip-box__btn-icon--left {
    margin-right: 8px;
}

.ekl-flip-box__btn-icon--right {
    margin-left: 8px;
}

.ekl-flip-box__btn-icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

/* Which face starts turned away, and which way the card turns to show it. */
.ekl-flip-box[data-direction='animate-left'],
.ekl-flip-box[data-direction='left'] {
    .ekl-flip-box__back { transform: rotateY(180deg); }
    &:hover .ekl-flip-box__inner,
    &.is-flipped .ekl-flip-box__inner { transform: rotateY(-180deg); }
    &.ekl-flip-box--click:hover:not(.is-flipped) .ekl-flip-box__inner { transform: none; }
}

.ekl-flip-box[data-direction='animate-right'],
.ekl-flip-box[data-direction='right'] {
    .ekl-flip-box__back { transform: rotateY(-180deg); }
    &:hover .ekl-flip-box__inner,
    &.is-flipped .ekl-flip-box__inner { transform: rotateY(180deg); }
    &.ekl-flip-box--click:hover:not(.is-flipped) .ekl-flip-box__inner { transform: none; }
}

.ekl-flip-box[data-direction='animate-up'],
.ekl-flip-box[data-direction='up'] {
    .ekl-flip-box__back { transform: rotateX(180deg); }
    &:hover .ekl-flip-box__inner,
    &.is-flipped .ekl-flip-box__inner { transform: rotateX(-180deg); }
    &.ekl-flip-box--click:hover:not(.is-flipped) .ekl-flip-box__inner { transform: none; }
}

.ekl-flip-box[data-direction='animate-down'],
.ekl-flip-box[data-direction='down'] {
    .ekl-flip-box__back { transform: rotateX(-180deg); }
    &:hover .ekl-flip-box__inner,
    &.is-flipped .ekl-flip-box__inner { transform: rotateX(180deg); }
    &.ekl-flip-box--click:hover:not(.is-flipped) .ekl-flip-box__inner { transform: none; }
}

/* Zoom In */
.ekl-flip-box[data-direction='animate-zoom-in'] {
    .ekl-flip-box__inner {
        transform: none !important;
    }
    .ekl-flip-box__front {
        transition: opacity 0.5s ease, transform 0.5s ease;
        transition-duration: inherit;
    }
    .ekl-flip-box__back {
        opacity: 0;
        visibility: hidden;
        transform: scale(0.75);
        transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s ease;
        transition-duration: inherit;
        z-index: 2;
    }
    &:hover:not(.ekl-flip-box--click) .ekl-flip-box__back,
    &.is-flipped .ekl-flip-box__back {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
    }
    &:hover:not(.ekl-flip-box--click) .ekl-flip-box__front,
    &.is-flipped .ekl-flip-box__front {
        opacity: 0;
        visibility: hidden;
    }
}

/* Zoom Out */
.ekl-flip-box[data-direction='animate-zoom-out'] {
    .ekl-flip-box__inner {
        transform: none !important;
    }
    .ekl-flip-box__front {
        transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s ease;
        transition-duration: inherit;
        z-index: 2;
    }
    .ekl-flip-box__back {
        opacity: 1;
        transform: scale(1);
        z-index: 1;
    }
    &:hover:not(.ekl-flip-box--click) .ekl-flip-box__front,
    &.is-flipped .ekl-flip-box__front {
        opacity: 0;
        visibility: hidden;
        transform: scale(0.75);
    }
}

/* Fade In */
.ekl-flip-box[data-direction='animate-fade-in'] {
    .ekl-flip-box__inner {
        transform: none !important;
    }
    .ekl-flip-box__front {
        transition: opacity 0.5s ease;
        transition-duration: inherit;
    }
    .ekl-flip-box__back {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.5s ease, visibility 0.5s ease;
        transition-duration: inherit;
        z-index: 2;
    }
    &:hover:not(.ekl-flip-box--click) .ekl-flip-box__back,
    &.is-flipped .ekl-flip-box__back {
        opacity: 1;
        visibility: visible;
    }
    &:hover:not(.ekl-flip-box--click) .ekl-flip-box__front,
    &.is-flipped .ekl-flip-box__front {
        opacity: 0;
        visibility: hidden;
    }
}

/* A card that turns on hover has no hover to turn on when tapped, so on a
   touch screen both faces are simply shown, one after the other. */
@media (hover: none) {
    .ekl-flip-box:not(.ekl-flip-box--click) {
        @apply h-auto!;
    }

    .ekl-flip-box:not(.ekl-flip-box--click) .ekl-flip-box__inner {
        @apply flex flex-col;

        transform: none !important;
    }

    .ekl-flip-box:not(.ekl-flip-box--click) .ekl-flip-box__side {
        @apply static transform-none;

        backface-visibility: visible;
    }
}



/*
 * The toggle: out of sight until it has focus, then a small pill in the corner of
 * the card. A keyboard's way to turn it; a pointer has the card itself.
 */
.ekl-flip-box__toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;

    &:focus-visible {
        top: 8px;
        left: 8px;
        z-index: 10;
        width: auto;
        height: auto;
        margin: 0;
        padding: 6px 12px;
        overflow: visible;
        clip: auto;
        border-radius: 4px;
        background: #111;
        color: #fff;
        font-size: 13px;
        line-height: 1.2;
        outline: 3px solid #fff;
        box-shadow: 0 0 0 5px #111;
    }
}

/* Less motion asked for: the card changes face at once. */
@media (prefers-reduced-motion: reduce) {
    .ekl-flip-box,
    .ekl-flip-box * {
        transition: none !important;
    }
}

/*
 * Style presets. The front takes the look; the back is its opposite, so the
 * turn is a change: the accent behind the text that was behind it.
 */
.ek-flip-box:where([class*="ekl-preset-"]) {
    .ekl-flip-box__front,
    .ekl-flip-box__back {
        border: var(--ekl-ps-border);
        border-radius: var(--ekl-ps-radius);
        box-shadow: var(--ekl-ps-shadow);
    }

    .ekl-flip-box__front {
        background: var(--ekl-ps-bg);
        color: var(--ekl-ps-fg);
    }

    .ekl-flip-box__front .ekl-flip-box__description {
        color: var(--ekl-ps-muted);
    }

    .ekl-flip-box__front .ekl-flip-box__icon {
        color: var(--ekl-ps-accent);

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

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

    .ekl-flip-box__back {
        background: var(--ekl-ps-accent);
        color: var(--ekl-ps-on-accent);
    }

    .ekl-flip-box__back .ekl-flip-box__button,
    .ekl-flip-box__back .ekl-flip-box__button:hover,
    .ekl-flip-box__back .ekl-flip-box__button:focus {
        background-color: var(--ekl-ps-on-accent);
        color: var(--ekl-ps-accent);
    }
}