@layer base {
    html {
        @apply font-body;

        background-color: var(--c-page-bg);
        color: var(--c-on-page-bg);

        line-height: 1.5;

        overscroll-behavior: none;
        scrollbar-color: rgba(var(--c-on-page-bg-rgb), 0.1) transparent;

        &::-webkit-scrollbar {
            width: 12px;
            height: 12px;
            background-color: var(--c-page-bg);
        }

        &::-webkit-scrollbar-thumb {
            background-color: rgba(var(--c-on-page-bg-rgb), 0.1);
        }
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-weight: normal;
        margin-top: theme('spacing.8', 2rem);
        margin-bottom: theme('spacing.4', 1rem);
        cursor: inherit;

        &:first-child {
            margin-top: 0;
        }

        &:last-child {
            margin-bottom: 0;
        }
    }

    h1,
    h2 {
        font-family: theme('fontFamily.heading');
    }

    h1 {
        font-size: theme('fontSize.2xl');
    }

    h2 {
        font-size: theme('fontSize.lg');
    }

    h3,
    h4,
    h5,
    h6 {
        font-size: theme('fontSize.base');
    }

    p,
    ol,
    ul,
    blockquote {
        margin-top: theme('spacing.4', 1rem);
        margin-bottom: theme('spacing.4', 1rem);

        &:first-child {
            margin-top: 0;
        }

        &:last-child {
            margin-bottom: 0;
        }
    }

    ol,
    ul {
        padding-left: 1.5rem;
    }

    blockquote {
        padding: theme('spacing.4', 1rem);
        margin-left: 0;
        margin-right: 0;
        border-left: 0.25rem solid var(--c-mono-600);
    }

    blockquote > *:last-child {
        margin-bottom: 0;
    }

    i,
    em,
    cite {
        font-style: italic;
    }

    hr {
        box-sizing: content-box;
        height: 0;
        overflow: visible;
        border-top-width: 1px;
        margin: theme('spacing.4') 0;
    }

    hr[data-separator] {
        margin-left: 2rem;
        margin-right: 2rem;
        width: calc(100% - 4rem);

        &:after {
            content: attr(data-separator);

            display: block;
            height: 1.5rem;
            width: min-content;
            padding-left: 1.5rem;
            padding-right: 1.5rem;
            margin: -0.75rem auto;

            text-align: center;
            font-size: 0.875rem;
            color: var(--c-mono-400);
            background-color: var(--c-surface);
        }
    }

    pre {
        @apply bg-mono-900;
        font-family: theme('fontFamily.body', monospace);
        font-size: 1em;
        padding: theme('spacing.4', 1rem);
        border-radius: theme('borderRadius.sm', 0);
        box-shadow: theme('boxShadow.inner');
        overflow-x: auto;
    }

    code,
    kbd,
    samp {
        font-family: theme('fontFamily.body', monospace);
        font-size: 1em;
    }

    code {
        color: var(--c-mono-300);
        background: var(--c-mono-900);
        border-radius: 0.25rem;
    }

    code:where(:not([class*='language-'])) {
        @apply text-error bg-error bg-opacity-20;
        padding: 0.125em 0.25em;
        border-radius: theme('borderRadius.sm', 0);
        color: theme('colors.error', 'tomato');
    }

    kbd {
        @apply bg-mono-0 bg-opacity-20;
        border-radius: 2px;
        display: inline-block;
        white-space: nowrap;
        line-height: 0.875em;
        /* font-size: 0.625em; */
        padding: 4px;
        min-width: 16px;
        text-align: center;
        margin: 0 1px;
        text-shadow: 1px 1px 0 rgba(var(--c-mono-0-rgb), 0.15);
    }

    a,
    .link {
        background-color: transparent;
        color: inherit;
        text-decoration: inherit;
        color: var(--btn-color, var(--c-accent, #56af40));

        &:focus {
            outline: none;
        }
    }

    a,
    button {
        touch-action: manipulation;
    }

    a:not([class]):hover,
    .link:hover {
        color: color-mix(
            in srgb,
            var(--btn-color, var(--c-accent, #56af40)) 81%,
            var(--c-mono-0)
        );
        text-decoration: underline;
    }

    .link-reset,
    .link-reset:hover {
        color: inherit;
        text-decoration: inherit;
    }

    a:not([class]):focus-visible,
    .link:focus-visible {
        outline: theme('focusOutline');
    }

    .link:disabled,
    .link[disabled] {
        @apply text-mono-400;
        cursor: not-allowed;

        &:hover,
        &:focus {
            text-decoration: none;
            outline: none;
        }
    }

    abbr[title] {
        border-bottom: none;
        text-decoration: underline;
        text-decoration: underline dotted;
    }

    b,
    strong {
        font-weight: theme('fontWeight.bold', bolder);
    }

    small {
        font-size: 80%;
    }

    sub,
    sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    }

    sub {
        bottom: -0.25em;
    }

    sup {
        top: -0.5em;
    }

    button,
    input,
    optgroup,
    select,
    textarea {
        font-family: inherit;
        font-size: 100%;
        margin: 0;
    }

    button,
    input {
        overflow: visible;
    }

    button,
    select {
        text-transform: none;
    }

    button,
    [type='button'],
    [type='reset'],
    [type='submit'] {
        -webkit-appearance: button;
    }

    button::-moz-focus-inner,
    [type='button']::-moz-focus-inner,
    [type='reset']::-moz-focus-inner,
    [type='submit']::-moz-focus-inner {
        border-style: none;
        padding: 0;
    }

    button:-moz-focusring,
    [type='button']:-moz-focusring,
    [type='reset']:-moz-focusring,
    [type='submit']:-moz-focusring {
        outline: 1px dotted ButtonText;
    }

    button:focus {
        outline: none;
    }

    button:focus-visible {
        outline: theme('focusOutline');
    }

    fieldset {
        /* padding: 0.35em 0.75em 0.625em; */
        margin: 0;
        padding: 0;
    }

    legend {
        box-sizing: border-box;
        color: inherit;
        display: table;
        max-width: 100%;
        padding: 0;
        white-space: normal;
    }

    progress {
        vertical-align: baseline;
    }

    textarea {
        overflow: auto;
        resize: vertical;
    }

    [type='checkbox'],
    [type='radio'] {
        box-sizing: border-box;
        padding: 0;
    }

    [type='number']::-webkit-inner-spin-button,
    [type='number']::-webkit-outer-spin-button {
        height: auto;
    }

    [type='search'] {
        -webkit-appearance: textfield;
        outline-offset: -2px;
    }

    [type='search']::-webkit-search-decoration {
        -webkit-appearance: none;
    }

    ::-webkit-file-upload-button {
        -webkit-appearance: button;
        font: inherit;
    }

    /**
     * Removes the default spacing and border for appropriate elements.
     */

    /* blockquote,
    dl,
    dd,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    hr,
    figure,
    p,
    pre {
      margin: 0;
    } */

    /* ol,
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
    } */

    table {
        border-collapse: collapse;
    }

    tr {
        @apply bg-surface;

        & + & {
            border-top-width: 1px;
        }
    }

    thead tr {
        @apply bg-mono-800;
        border-bottom-width: 1px;
    }

    td,
    th {
        padding: theme('spacing.3', 0.75rem) theme('spacing.4', 1rem);
        font-weight: 400;
        text-align: left;
        vertical-align: middle;
    }

    img,
    /* svg, */
    video,
    canvas,
    audio,
    iframe,
    embed,
    object {
        display: block;
        vertical-align: middle;
    }

    img,
    video {
        max-width: 100%;
        height: auto;
    }
}

@screen lg {
    td {
        padding-left: theme('spacing.6', 1.5rem);
        padding-right: theme('spacing.6', 1.5rem);
    }

    th {
        padding: theme('spacing.5', 1.25rem) theme('spacing.6', 1.5rem);
    }
}