@layer components {
    /* Labels for inputs */
    .label {
        font-weight: bold;

        .field_with_errors & {
          color: var(--color-theme-rose-dark);
        }
    }

    /* 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;
            outline-color: var(--color-theme-cinnamon-light);
        }

        &[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;
            }
        }

        /* targets input when inside field_with_errors */
        .field_with_errors & {
            --input-border-color: var(--color-theme-rose-dark);
            --input-border-size: 2px;
        }

        /* 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-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)));
        }
    }

    .lexxy-content {
      .field_with_errors & {
        border-color: var(--color-theme-rose-dark) !important;
        border-width: 2px !important;
      }
    }
}