/*
 * Functional CSS for the layers extension's stacking/animation mechanics.
 * Decorative styling (cards, buttons, forms, tables, ...) is handled by
 * daisyUI utility classes directly in the demo HTML; only the rules that
 * the extension itself depends on (dialog positioning, offsets, stacking,
 * backdrop, transitions) live here, themed with daisyUI's CSS variables.
 */

dialog[data-hx-layer] {
    border: none;
    border-radius: var(--radius-box);
    padding: 0;
    background: var(--color-base-100);
    color: var(--color-base-content);
    box-shadow: var(--shadow-lg, 0 20px 60px rgba(0, 0, 0, 0.3));
    position: fixed;
    inset: auto;
    top: 50%;
    left: 50%;
    margin: 0;
    max-width: min(90vw, 500px);
    max-height: 85vh;
    overflow: auto;
    transform: translate(-50%, -50%);
    z-index: 1001;
    animation: slideIn 0.3s ease;
    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}

dialog[data-hx-layer]::backdrop {
    background: transparent;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translate(-50%, calc(-50% - 50px));
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

/* A "step" dialog moves in/out by sliding instead of using slideIn */
dialog[data-hx-layer].hx-layer-no-default-anim {
    animation: none;
}

dialog[data-hx-layer].hx-layer-offset-right {
    transform: translate(calc(-50% + 60px), -50%);
    opacity: 0;
}

dialog[data-hx-layer].hx-layer-offset-left {
    transform: translate(calc(-50% - 60px), -50%);
    opacity: 0;
}

/* A layer that has a nested layer open on top of it peeks out behind it,
   offset towards the top-right corner so it stays visible regardless of
   how the two dialogs compare in size */
dialog[data-hx-layer].hx-layer-stacked {
    transform: translate(calc(-50% + 48px), calc(-50% - 48px)) scale(0.94);
}

/* Single shared backdrop behind all layer dialogs, kept constant across
   step/replace transitions instead of relying on each dialog's own
   ::backdrop (which would fade in/out and cause flicker) */
.hx-layers-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.hx-layers-backdrop.hx-layer-backdrop-visible {
    opacity: 1;
}

/* Reusable header bar for the dialog templates used throughout the demos */
.dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-base-200);
}

.dialog-header h3 {
    margin: 0;
}

@keyframes rowFlash {
    from {
        background: var(--color-success);
    }
    to {
        background: transparent;
    }
}

.row-flash {
    animation: rowFlash 1.5s ease;
}

/* While a request is in flight, htmx adds an `htmx-request` class to the
   element that triggered it (the button itself, by default). Hide its
   label and show a spinner so the user gets immediate feedback that the
   click registered. */
.btn.htmx-request {
    pointer-events: none;
    color: transparent !important;
    position: relative;
}

.btn.htmx-request::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1em;
    height: 1em;
    margin: -0.5em;
    border: 2px solid var(--color-base-content);
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
}

@keyframes btn-spin {
    to {
        transform: rotate(360deg);
    }
}