/* Indux Tooltips */

@layer base {

    /* Base popover styles */
    :where([popover]) {
        display: none;
        transition: opacity .15s ease-in, scale .15s ease-in, display .15s ease-in;
        transition-behavior: allow-discrete;

        &:popover-open {
            display: flex
        }

        /* Opening state */
        @starting-style {
            scale: .9;
            opacity: 0
        }

        /* Closing state */
        &:not(:popover-open) {
            display: none !important;
            scale: 1;
            opacity: 0;
            transition-duration: .15s;
            transition-timing-function: ease-out
        }
    }
}

@layer utilities {

    :where(.tooltip[popover]) {
        position: absolute;
        position-try-fallbacks: flip-inline, flip-block, flip-start;
        position-area: bottom;
        inset: auto;
        display: block;
        width: fit-content;
        max-width: 200px;
        margin: var(--spacing-popover-offset, 0.5rem) 0;
        padding: calc(var(--spacing, 0.25rem) * .5) calc(var(--spacing, 0.25rem) * 2);
        font-size: 0.875rem;
        color: var(--color-page, oklch(100% 0 0));
        background-color: var(--color-content-stark, oklch(16.6% 0.026 267));
        border: 0 none;
        border-radius: var(--radius, 0.5rem);
        box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);

        &:hover {
            transition-delay: var(--tooltip-hover-delay, 1s)
        }

        /* Leading icon */
        & [x-icon]:first-child {
            margin-inline-end: 0.25rem
        }
    }

    /* Top alignment */
    :where(.tooltip.top) {
        position-area: top;
        margin: var(--spacing-popover-offset, 0.5rem) 0
    }

    /* Bottom alignment */
    :where(.tooltip.bottom) {
        position-area: bottom;
        margin: var(--spacing-popover-offset, 0.5rem) 0
    }

    /* Start alignment */
    :where(.tooltip.start) {
        position-area: center start;
        margin: 0 var(--spacing-popover-offset, 0.5rem)
    }

    /* End alignment */
    :where(.tooltip.end) {
        position-area: center end;
        margin: 0 var(--spacing-popover-offset, 0.5rem)
    }

    /* Top start alignment */
    :where(.tooltip.top-start) {
        position-area: start span-end;
        margin: var(--spacing-popover-offset, 0.5rem) 0
    }

    /* Top end alignment */
    :where(.tooltip.top-end) {
        position-area: start span-start;
        margin: var(--spacing-popover-offset, 0.5rem) 0
    }

    /* Bottom start alignment */
    :where(.tooltip.bottom-start) {
        position-area: end span-end;
        margin: var(--spacing-popover-offset, 0.5rem) 0
    }

    /* Bottom end alignment */
    :where(.tooltip.bottom-end) {
        position-area: end span-start;
        margin: var(--spacing-popover-offset, 0.5rem) 0
    }

    /* Start top alignment */
    :where(.tooltip.start-top) {
        position-area: span-end start;
        margin: 0 var(--spacing-popover-offset, 0.5rem)
    }

    /* Start bottom alignment */
    :where(.tooltip.start-bottom) {
        position-area: span-start start;
        margin: 0 var(--spacing-popover-offset, 0.5rem)
    }

    /* End top alignment */
    :where(.tooltip.end-top) {
        position-area: span-end end;
        margin: 0 var(--spacing-popover-offset, 0.5rem)
    }
    
    /* End bottom alignment */
    :where(.tooltip.end-bottom) {
        position-area: span-start end;
        margin: 0 var(--spacing-popover-offset, 0.5rem)
    }

    /* Top start corner alignment */
    :where(.tooltip.top-start-corner, .tooltip.start-top-corner) {
        position-area: start start;
        margin: var(--spacing-popover-offset, 0.5rem)
    }
    
    /* Top end corner alignment */
    :where(.tooltip.top-end-corner, .tooltip.end-top-corner) {
        position-area: start end;
        margin: var(--spacing-popover-offset, 0.5rem)
    }
    
    /* Bottom start corner alignment */
    :where(.tooltip.bottom-start-corner, .tooltip.start-bottom-corner) {
        position-area: end start;
        margin: var(--spacing-popover-offset, 0.5rem)
    }
    
    /* Bottom end corner alignment */
    :where(.tooltip.bottom-end-corner, .tooltip.end-bottom-corner) {
        position-area: end end;
        margin: var(--spacing-popover-offset, 0.5rem)
    }
}