.form-field :is(input, textarea, select) {
    box-shadow: var(--box-shadow--input);
}

.input :is(input, textarea, .input--select) {
    width: 100%;
    border-radius: var(--border-radius);
    border: none;
    outline: 1px solid var(--color--gray-10);
    transition: var(--transition);
    transition-duration: 100ms;
    padding-left: var(--_input-padding-left);
    padding-block: .5rem;
    order: 2;
    font-size: var(--text-sm);
}

textarea {
    resize: vertical;
    width: 100%;
}

.input {
    display: flex;
    flex-direction: column;
    gap: var(--spacing--sm);
    position: relative;
    width: 100%;
    text-align: left;
    --_input-padding-left: 0.5rem;
    --_icon-width: 1.25rem;
}

.input .input__label, .input-file .input__label {
    font-weight: 500;
    width: calc(100% - var(--_icon-width));
    order: 1;
    font-size: var(--text-sm);
}

.input :is(input, textarea, select)[required] + .input__label::after, .input__label.required::after {
    content: '*';
    color: var(--color--red);
    margin-left: 0.25em;
}

.input .input--select {
    --_input-padding-left: 0.25rem;
    padding-block: 0.4rem;
}


.input :is(input, textarea, select):focus-visible ~ .input__label {
    color: var(--color--primary);
}

.input :is(input, textarea, select):focus-visible {
    outline: 2px solid var(--color--primary);
    box-shadow: var(--box-shadow--input);
}

.form-field + .form-field {
    margin-top: var(--spacing--md);
}


.input__error {
    color: var(--color--red);
    font-size: var(--text--xs);
    order: 3;
}

.form-wrapper form > :is(.button-holder, .button-wrapper):last-child {
    margin-top: var(--spacing--lg);
}

.input-checkbox__wrapper {
    display: inline-flex;
    align-items: baseline;
    font-size: var(--text-sm);
    position: relative;
}

.input--checkbox {
    flex-direction: column-reverse;
}

:not(#fakeid).input--checkbox input {
    outline: none;
    background: transparent;
    box-shadow: none;
    width: 20px;
    aspect-ratio: 1 / 1;
}

.input--hidden {
    display: none !important;
}