/* Extend the Tailwind preflight with a few improvements of our own */

@layer base {
    :where(:focus-visible) {
        outline: var(--outline-size, 2px) solid var(--color-primary);
        outline-offset: var(--outline-offset, 2px);
    }

    :where(:active:focus-visible) {
        outline-offset: 0;
        transition: var(
            --outline-transition,
            outline-offset 150ms cubic-bezier(0.25, 0, 0.4, 1)
        );
    }

    :disabled {
        cursor: not-allowed;
    }

    :target {
        scroll-margin-block: var(--anchor-offset, 6ex);
    }

    @media (prefers-reduced-motion: no-preference) {
        :where(html):has(:target) {
            scroll-behavior: smooth;
        }
    }

    html {
        block-size: 100%;
        scrollbar-gutter: stable;
    }

    body {
        min-block-size: 100%;
    }

    /* Prevent touch delay on touch devices */
    /* prettier-ignore */
    :where(
        :any-link,
        button,
        input,
        label[for],
        select,
        summary,
        textarea,
        [tabindex]:not([tabindex^="-"])
    ) {
        touch-action: manipulation;
    }

    /* Set a default cursor for interactive elements */
    /* prettier-ignore */
    :where(
        :any-link,
        button,
        label[for],
        label:has(input:is([type="radio"], [type="checkbox"]):enabled),
        select:has(option:enabled),
        summary
    ) {
        cursor: pointer;
    }

    /* set common default for the HTML Dialog */
    :where(dialog) {
        position: fixed;
        max-block-size: calc(100% - 2rem);
        max-inline-size: calc(100% - 2rem);
        background-color: var(--color-surface, canvas);
        color: var(--color-fg, canvastext);
        border-radius: 1rem;
        margin: auto;
        padding: 1.5rem;
        box-shadow: var(--shadow-lg);

        &::backdrop {
            background-color: var(--backdrop, hsl(0 0% 0% / 20%));
        }
    }

    :where(:root:has(dialog[open]:modal)) {
        overflow: hidden;
    }

    address {
        font-style: normal;
    }
}