/*
 * Hotspot widget.
 */
.ekl-hotspot {
    @apply w-full;
}

.ekl-hotspot__stage {
    @apply relative w-full;

    img {
        @apply block h-auto w-full;
    }
}

/* A point sits on its place on the picture; the note hangs off it. */
.ekl-hotspot__item {
    @apply absolute z-[2];

    transform: translate(-50%, -50%);
}

.ekl-hotspot__item.is-open {
    @apply z-[5];
}

.ekl-hotspot__point {
    --ekl-hs-ring: var(--color-ekl-brand);

    @apply relative flex h-[34px] w-[34px] cursor-pointer items-center justify-center rounded-full border-0 bg-ekl-brand p-0 text-[14px] text-white;

    font-family: inherit;

    &:focus-visible {
        outline: 3px solid #fff;
        outline-offset: 2px;
        box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.75);
    }
}

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

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

    svg {
        @apply fill-current;
    }
}

/* The ring that pulses, so a point is seen on a busy picture. */
.ekl-hotspot--pulse .ekl-hotspot__point::before {
    content: '';

    @apply pointer-events-none absolute inset-0 rounded-full;

    background-color: var(--ekl-hs-ring);
    animation: ekl-hs-pulse 1.8s ease-out infinite;
}

@keyframes ekl-hs-pulse {
    0% {
        opacity: 0.55;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(2.2);
    }
}

.ekl-hotspot__note {
    @apply absolute w-[240px] max-w-[80vw] rounded-[8px] bg-white p-[14px] text-left text-[14px] leading-[1.5] text-ekl-text shadow-[0_6px_24px_rgba(0,0,0,0.22)];

    &[hidden] {
        @apply hidden;
    }
}

.ekl-hotspot__note-title {
    @apply mb-[4px] text-[15px] font-bold;
}

.ekl-hotspot__note-text {
    @apply text-ekl-neutral-700;
}

.ekl-hotspot__note-link {
    @apply mt-[8px] inline-block font-semibold text-ekl-brand underline-offset-2 hover:underline;

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

/* Which side of the point the note hangs on. The shift keeps it in the picture. */
.ekl-hotspot__item--top .ekl-hotspot__note {
    @apply bottom-[calc(100%+10px)] left-1/2;

    transform: translate(calc(-50% + var(--ekl-hs-shift, 0px)), var(--ekl-hs-shift-y, 0px));
}

.ekl-hotspot__item--bottom .ekl-hotspot__note {
    @apply left-1/2 top-[calc(100%+10px)];

    transform: translate(calc(-50% + var(--ekl-hs-shift, 0px)), var(--ekl-hs-shift-y, 0px));
}

.ekl-hotspot__item--left .ekl-hotspot__note {
    @apply right-[calc(100%+10px)] top-1/2;

    transform: translate(var(--ekl-hs-shift, 0px), calc(-50% + var(--ekl-hs-shift-y, 0px)));
}

.ekl-hotspot__item--right .ekl-hotspot__note {
    @apply left-[calc(100%+10px)] top-1/2;

    transform: translate(var(--ekl-hs-shift, 0px), calc(-50% + var(--ekl-hs-shift-y, 0px)));
}

@media (prefers-reduced-motion: reduce) {
    .ekl-hotspot--pulse .ekl-hotspot__point::before {
        animation: none;
        opacity: 0;
    }
}

/*
 * 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-hotspot .ekl-hotspot__point,
.ekl-hotspot .ekl-hotspot__point:hover,
.ekl-hotspot .ekl-hotspot__point:focus,
.ekl-hotspot .ekl-hotspot__point:active {
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background-color: var(--color-ekl-brand);
    color: #fff;
    font-size: 14px;
    text-decoration: none;
}