/* Variants based on LiveView classes */
@custom-variant phx-click-loading (.phx-click-loading&, .phx-click-loading &);
@custom-variant phx-submit-loading (.phx-submit-loading&, .phx-submit-loading &);
@custom-variant phx-change-loading (.phx-change-loading&, .phx-change-loading &);

/* Make LiveView wrapper divs transparent for layout */
[data-phx-session] {
    display: contents;
}

@layer base {
    html {
        font-family: sans-serif;
        font-weight: 400;
    }

    h1,
    h2,
    h3 {
        font-weight: 300;
    }

    a {
        overflow-wrap: anywhere;
    }

    code {
        font-family: monospace;
        font-weight: 400;
    }
}

.prose {
    pre {
        overflow-x: auto;
        max-width: 100%;
        min-width: 0;
    }

    h1,
    h2,
    h3 {
        font-weight: 300;
    }

    & :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        margin-top: 2em;
        margin-bottom: 2em;
    }

    & :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        margin-top: 0em;
        margin-bottom: 0em;
    }
}

@layer components {
    /* A table written with an empty header row (`| | |`, `| --- | --- |`) renders without a header */
    thead:not(:has(th:not(:empty))) {
        display: none;
    }

    blockquote p {
        @apply text-primary font-semibold;
    }
}