@layer reset, base, components;

@layer reset {
    // Box sizing rules
    *,
    ::before,
    ::after,
    ::backdrop,
    ::file-selector-button {
        box-sizing: border-box;
    }

    // Remove default margin and padding
    body,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    figure,
    blockquote,
    dl,
    dd {
        margin: 0;
        padding: 0;
    }

    // Prevent font size inflation
    html {
        text-size-adjust: none;
    }

    // Set core root defaults
    html:focus-within {
        scroll-behavior: smooth;
    }

    // Set core body defaults
    body {
        min-height: 100vh;
        min-height: 100dvh;
        text-rendering: optimizespeed;
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    // Set shorter line heights on headings and interactive elements
    h1,
    h2,
    h3,
    h4,
    button,
    input,
    label {
        line-height: 1.1;
    }

    // Make images easier to work with
    img,
    picture,
    video,
    canvas,
    svg,
    audio,
    iframe,
    embed,
    object {
        display: block;
        vertical-align: middle;
    }

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

    // Inherit fonts for inputs and buttons
    input,
    button,
    textarea,
    select {
        font: inherit;
        cursor: pointer;

        &:disabled {
            cursor: not-allowed;
        }
    }

    // Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed
    ul[role="list"],
    ol[role="list"] {
        list-style: none;
        padding-inline-start: 0; // Replaces padding-left
        margin-block: 0; // Replaces margin-top/bottom

        & > li {
            margin-block: 0;
        }
    }

    // Remove underline from links
    a {
        text-decoration-skip-ink: auto;
        text-decoration: none;
        color: inherit;
    }

    // Make sure text areas without a rows attribute are not tiny
    textarea:not([rows]) {
        min-height: 10em;
    }

    // Anything that has been anchored to should have extra scroll margin
    :target {
        scroll-margin-block: 5ex;
    }

    // Remove all animations and transitions for people that prefer not to see them
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }
} // end @layer reset