:where(input),
:where(textarea) {
    /* Input sizing units */
    --smallest: 16rem;
    --smaller: 24rem;
    --medium: 32rem;
    --larger: 40rem;

    border: none;
    width: var(--input-width, 100%);
    padding: 0;
    padding-inline: var(--default-size);
    margin: 0;
    background-color: var(--color-almost-background);
    color: var(--color-primary);
    border-radius: var(--small-radius);

    resize: none;

    &:focus-visible {
        outline: var(--color-primary) solid 1px;
        outline-offset: 2px;
    }

    &.smallest {
        --input-width: var(--smallest);
    }

    &.smaller {
        --input-width: var(--smaller);
    }

    &.medium {
        --input-width: var(--medium);
    }

    &.larger {
        --input-width: var(--larger);
    }
}

:where(label) {
    color: var(--color-background-content);
}

.errors {
    margin: 0;
    padding: var(--half-size);
    padding-inline-start: var(--double-size);
    border-radius: var(--small-radius);
    border: 1px solid var(--color-error);
    color: var(--color-error);
    /*list-style-type: none;*/
}

:where(textarea) {
    padding-block: var(--default-size);
}

:where(input) {
    height: 3rem;
}
