/*
 * 360° Rotation widget.
 *
 * Every frame sits in the same place; one is shown at a time. The first frame
 * is the one in the flow, so the viewer is exactly as tall as the pictures and
 * the rest are laid over it.
 */
.ekl-360,
.ha-threesixty-rotation-wrapper {
    @apply relative w-full select-none overflow-hidden;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}

.ekl-360[data-drag='yes'] {
    @apply cursor-grab;

    &.is-dragging {
        @apply cursor-grabbing;
    }
}

.ekl-360__frame {
    @apply absolute inset-0 hidden;

    /* The first frame keeps its place in the flow and gives the viewer height. */
    &[data-frame='0'] {
        @apply static block;
    }

    &.is-showing {
        @apply block;
    }

    /* Shown or not, the first frame is what everything else is sized against. */
    &[data-frame='0']:not(.is-showing) {
        @apply invisible;
    }

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

.ekl-360__hint {
    @apply pointer-events-none absolute bottom-[14px] left-1/2 -translate-x-1/2 rounded-full px-[14px] py-[7px] text-[13px] leading-none text-white;

    background-color: rgb(0 0 0 / 50%);
}


/* Focus on the viewer (it is a slider for the keyboard). Inside, or overflow: hidden would cut it off. */
.ekl-360:focus-visible {
    outline: 3px solid var(--color-ekl-brand);
    outline-offset: -6px;
}

/* Pause / Play, when it turns by itself. A real button. */
.ekl-360__pause {
    @apply absolute right-[8px] top-[8px] z-10 flex h-[36px] w-[36px] cursor-pointer items-center justify-center rounded-full border-0 bg-black/55 p-0 text-white transition-colors duration-200 hover:bg-black/80;

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

@media (prefers-reduced-motion: reduce) {
    .ekl-360__pause {
        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-360 .ekl-360__pause,
.ekl-360 .ekl-360__pause:hover,
.ekl-360 .ekl-360__pause:focus,
.ekl-360 .ekl-360__pause:active {
    padding: 0;
    border: 0;
    border-radius: 9999px;
    color: #fff;
    text-decoration: none;
}

.ekl-360 .ekl-360__pause {
    background-color: rgba(0, 0, 0, 0.55);
}

.ekl-360 .ekl-360__pause:hover,
.ekl-360 .ekl-360__pause:focus,
.ekl-360 .ekl-360__pause:active {
    background-color: rgba(0, 0, 0, 0.8);
}