@layer components {

    .field {
        display: grid;
        gap: 6px;
    }

    .field__label {
        font-size: var(--t-sm);
        font-weight: 500;
    }

    .field__hint {
        font-weight: 400;
        color: var(--c-muted);
    }

    .field__input {
        width: 100%;
        min-height: 48px;
        padding: 0 var(--s-4);
        border: 1px solid var(--c-line-strong);
        border-radius: var(--r-1);
        background: var(--c-page);
        font-size: var(--t-base);
        transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
        appearance: none;
    }

    .field__input:hover {
        border-color: var(--c-ink);
    }

    .field__input:focus {
        border-color: var(--c-ink);
        box-shadow: inset 0 0 0 1px var(--c-ink);
        outline: none;
    }

    .field__input[aria-invalid="true"] {
        border-color: var(--c-warn);
        box-shadow: inset 0 0 0 1px var(--c-warn);
    }

    .field__input--select {
        padding-right: var(--s-7);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        background-position: right 14px center;
        background-repeat: no-repeat;
        background-size: 14px;
        cursor: pointer;
    }

    .field__input--area {
        min-height: 132px;
        padding-block: var(--s-3);
        line-height: 1.5;
        resize: vertical;
    }

    .field__file {
        font-size: var(--t-sm);
    }

    .field__file::file-selector-button {
        min-height: 40px;
        margin-right: var(--s-3);
        padding-inline: var(--s-4);
        border: 1px solid var(--c-line-strong);
        border-radius: var(--r-1);
        background: none;
        font: inherit;
        font-weight: 500;
        color: inherit;
        cursor: pointer;
    }

    .field__help {
        font-size: var(--t-xs);
        color: var(--c-muted);
    }

    .field__help:empty {
        display: none;
    }

    .field__error {
        font-size: var(--t-xs);
        font-weight: 500;
        color: var(--c-warn);
    }

    .field {
        min-width: 0;
    }

    .field__file {
        width: 100%;
        min-width: 0;
    }

}