@use "theme";
@use "tailwind/border-radius";
@use "tailwind/spacing";
@use "tailwind/text";

* {
    box-sizing: border-box;
}

body {
    // @apply flex flex-col gap-8 px-4 py-16 mx-auto max-w-4xl bg-slate-900 text-fg-base max-lg:py-8;
    font-family: Inter, "Inter Variable", sans-serif;
    color: var(--color-fg-base);
    background-color: var(--color-bg-base);
    padding: spacing.s(16) spacing.s(8);
    margin: 0 auto;
    max-width: spacing.$max-width-4xl;

    &.wide {
        max-width: spacing.$max-width-6xl;
    }

    @media not all and (min-width: var(--max-width-lg)) {
        padding: spacing.s(8);
    }

    header {
        margin-bottom: spacing.s(8);

        h1 {
            margin: 0;
            color: var(--color-fg-headings);
            font-size: text.$font-size-3xl;
            font-weight: text.$font-weight-extrabold;
        }
    }

    footer {
        color: var(--color-fg-deemphasized);
        margin-top: spacing.s(8);
        text-align: center;
    }
}

body.paste {
    header {
        display: flex;
        justify-content: space-between;
        align-items: end;

        .action-buttons {
            display: flex;
            justify-content: end;
            gap: spacing.s(2);

            button,
            [role="button"] {
                background-color: var(--color-bg-raised-1);
                padding: spacing.s(1) spacing.s(3);
                border: 1px solid var(--color-bd-base);
                border-radius: border-radius.$br-lg;
                cursor: pointer;
                color: inherit;
                font-size: text.$font-size-sm;
                text-decoration: none;

                &:hover,
                &:focus-visible {
                    background-color: var(--color-bg-raised-2);
                    border-color: var(--color-bd-highlighted);
                }
            }
        }
    }

    main {
        pre {
            // pre class="p-4 border border-bd-base rounded-xl" { (r.content) }
            background-color: var(--color-bg-raised-1);
            padding: spacing.s(4);
            border: 1px solid var(--color-bd-base);
            border-radius: border-radius.$br-xl;
            margin: 0;
        }
    }
}

body.admin-pastes {
    main form {
        input[type="text"],
        textarea,
        input[type="submit"] {
            padding: spacing.s(2) spacing.s(3);
            border-radius: border-radius.$br-lg;
            background-color: var(--color-bg-raised-1);
            border: 1px solid var(--color-bd-base);
            font-size: inherit;

            &:hover,
            &:focus-visible {
                background-color: var(--color-bg-raised-2);
                border-color: var(--color-bd-highlighted);
            }
        }

        input[type="text"],
        textarea {
            width: 100%;
            margin-bottom: spacing.s(4);
        }

        textarea {
            min-height: spacing.s(32);
        }

        input[type="submit"] {
            cursor: pointer;
            margin-left: auto;
            display: block;
        }
    }
}

a.tl {
    // @apply underline hover:no-underline hover:text-white focus-visible:no-underline focus-visible:text-white;
}

table {
    // @apply table-auto border-collapse border border-bd-base;

    thead tr th {
        // @apply border border-bd-base px-2 py-1 text-left;
    }

    tbody tr td {
        // @apply border border-bd-base px-2 py-1;
    }
}