@layer components {

    /* Text inputs */
    .input {
        accent-color: var(--input-accent-color, var(--color-ink));
        background-color: var(--input-background, transparent);
        border-radius: var(--input-border-radius, 0.5em);
        border: var(--input-border-size, 1px) solid var(--input-border-color, var(--color-ink-medium));
        color: var(--input-color, var(--color-ink));
        font-size: max(16px, 1em);
        inline-size: 100%;
        line-height: inherit;
        max-inline-size: 100%;
        padding: var(--input-padding, 0.5em 0.8em);
        resize: none;

        &:autofill,
        &:-webkit-autofill,
        &:-webkit-autofill:hover,
        &:-webkit-autofill:focus {
            -webkit-text-fill-color: var(--color-ink);
            -webkit-box-shadow: 0 0 0px 1000px var(--color-selected) inset;
        }

        &:where(:focus) {
            --focus-ring-offset: -1px;
        }

        &[readonly] {
            --focus-ring-size: 0;
        }

        &[autocomplete='one-time-code'] {
            --input-spacing: 0.5em;

            font-family: var(--font-mono);
            font-size: var(--text-large);
            font-weight: 900;
            inline-size: 18ch;
            letter-spacing: 1ch;
            min-inline-size: 18ch;
            text-align: center;
        }

        &[type='number'] {

            &::-webkit-outer-spin-button,
            &::-webkit-inner-spin-button {
                -webkit-appearance: none;
                margin: 0;
            }
        }

        /* Target mobile Safari only */
        @supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
            @media (hover: none) {
                font-size: max(16px, 1em) !important;
            }
        }
    }

    .input--file {
        cursor: pointer;
        display: grid;
        inline-size: auto;
        place-items: center;

        >* {
            grid-area: 1 / 1;
        }

        img {
            border-radius: 0.4em;
        }

        input[type="file"] {
            --hover-size: 0;
            --input-border-color: transparent;
            --input-border-radius: 8px;

            block-size: 100%;
            cursor: pointer;
            font-size: 0;
            inline-size: 100%;
            overflow: clip;

            &::file-selector-button {
                appearance: none;
                cursor: pointer;
                opacity: 0;
            }
        }

        &:has(input[type="file"]:focus),
        &:has(input[type="file"]:focus-visible) {
            outline: 0.15rem solid var(--color-selected-dark);
        }

        &:is(.avatar) {
            input[type="file"] {
                border-radius: 50%;
            }
        }
    }

    .input--select {
        --input-border-radius: 2em;
        --input-padding: 0.5em 1.8em 0.5em 1.2em;

        -webkit-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23000'/%3E%3C/svg%3E");
        background-size: 0.5em;
        background-position: center right 0.9em;
        background-repeat: no-repeat;
        text-align: start;

        @media (prefers-color-scheme: dark) {
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23fff'/%3E%3C/svg%3E");
        }

        option {
            background-color: var(--color-canvas);
            color: var(--color-ink);
        }
    }

    .input--textarea {
        --input-padding: 0;

        line-height: inherit;
        min-block-size: calc(3lh + (2 * var(--input-padding)));
        min-inline-size: 100%;
        padding-block: var(--input-padding);
        padding-inline: calc(var(--input-padding) + calc((1lh - 1ex) / 2));

        @supports (field-sizing: content) {
            field-sizing: content;
            max-block-size: calc(3lh + (2 * var(--input-padding)));
            min-block-size: calc(1lh + (2 * var(--input-padding)));
        }
    }

    .input--invisible {
        background-color: transparent;
        block-size: 5px;
        border: none;
        inline-size: 5px;
        opacity: 0.1;

        &:focus {
            outline: none;
        }
    }

    /* Switches */
    .switch {
        --switch-color: var(--color-ink-medium);
        --switch-hover-brightness: 0.9;

        block-size: 1.75em;
        border-radius: 2em;
        display: inline-flex;
        inline-size: 3em;
        position: relative;

        &:has(:focus-visible) {
            .switch__btn {
                outline: var(--focus-ring-size) solid var(--focus-ring-color);
            }
        }
    }

    .switch__input {
        block-size: 0;
        inline-size: 0;
        opacity: 0.1;
    }

    .switch__btn {
        background-color: var(--switch-color);
        border-radius: 2em;
        cursor: pointer;
        inset: 0;
        outline-offset: var(--focus-ring-offset);
        position: absolute;
        transition: 150ms ease;

        &::before {
            background-color: var(--color-ink-inverted);
            block-size: 1.35em;
            border-radius: 50%;
            content: "";
            inline-size: 1.35em;
            inset-block-end: 0.2em;
            inset-inline-start: 0.2em;
            position: absolute;
            transition: 150ms ease;
        }

        @media (any-hover: hover) {
            &:hover {
                background-color: color-mix(in srgb, var(--switch-color) 80%, var(--color-ink));
            }
        }

        .switch__input:checked+& {
            --switch-color: var(--color-link);

            &::before {
                transform: translateX(1.2em);
            }
        }

        .switch__input:disabled+& {
            --switch-color: var(--color-ink-medium);

            cursor: not-allowed;
            opacity: 0.5;
        }
    }

    /* Containers that act like (and contain) inputs */
    .input--actor {
        outline-offset: -1px;
        transition: box-shadow 150ms ease, outline-offset 150ms ease;

        &:focus-within {
            --input-border-color: var(--color-selected-dark);

            outline: var(--focus-ring-size) solid var(--focus-ring-color);
        }

        .input {
            --input-padding: 0;
            --input-border-radius: 0;
            --input-background: transparent;
            --input-border-size: 0;

            inline-size: 100%;
            outline: 0;
        }

        &:has(.input:is( :autofill,
                :-webkit-autofill,
                :-webkit-autofill:hover,
                :-webkit-autofill:focus)) {
            -webkit-text-fill-color: var(--color-text);
            -webkit-box-shadow: 0 0 0px 1000px var(--color-selected) inset;
        }
    }

    .input--hidden {
        block-size: 0;
        inline-size: 0;
        opacity: 0;
        padding: 0;
    }

    .input.boost__input {
        --input-border-radius: 0;
        --input-border-size: 0;
        --input-padding: 0;

        color: inherit;
        font-size: inherit;
        font-weight: inherit;
        inline-size: min-content;
        max-inline-size: 3ch;
        min-inline-size: 1ch;
        outline: none;

        @supports (field-sizing: content) {
            field-sizing: content;
            max-inline-size: unset;
        }

        &:focus {
            background-color: var(--color-highlight);
        }

        &::-webkit-outer-spin-button,
        &::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
    }
}