.field {
    display: grid;
    grid-template-areas: "label"
        "input"
        "helper"
        "errors";
    grid-template-columns: 1fr;
    padding: 0.25em;
    gap: 0.25em;
    align-items: center;
}

.field-input {
    background-color: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 0.5em;
    padding: 0.5em;
    font-size: 1em;
    box-shadow: rgba(0, 0, 0, 0.025) 0 6px 24px 0px, rgba(0, 0, 0, 0.028) 0 0 0 1px;
    transition: border-color 0.2s ease-in-out
}

.field-input.focus,
.field-input.hover,
.field-input:focus,
.field-input:hover {
    border-color: var(--primary)
}

.field-input.active,
.field-input:active {
    border-color: var(--primary-30)
}

.field-input.invalid {
    border-color: var(--negative) !important
}

.field-input:user-invalid {
    border-color: var(--negative)
}

.field-input.valid {
    border-color: var(--positive) !important
}

.field-input:user-valid {
    border-color: var(--positive)
}

.field-input::placeholder {
    color: var(--text-50)
}

.field-input.disabled,
.field-input.readonly,
.field-input[disabled],
.field-input[readonly] {
    background-color: var(--bg-90);
    color: var(--text-50);
    cursor: not-allowed
}

.field-label {
    grid-area: label;
    cursor: pointer;
}

.field-helper {
    grid-area: helper;
    font-size: small;
    opacity: 0.75;
}

.field-errors {
    grid-area: errors;
    color: var(--negative);
    font-size: small;
    margin: 0;
    padding: 0;
    padding-left: 1.2em;
    list-style-type: disc;
    min-height: 1.2em;
}