@layer forms {
    /*
    |--------------------------------------------------------------------------
    | Button component and variants
    |--------------------------------------------------------------------------
    */
    .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: fit-content;
        padding: var(--pad-sm) var(--pad-md);
        border: var(--border-thickness-base) solid var(--color-foreground);
        border-radius: var(--radius-sm);

        font-size: var(--font-size-base);
        font-weight: var(--font-weight-medium);
        line-height: var(--line-height-tight);
        color: var(--color-foreground);

        background-color: transparent;
        cursor: pointer;
        text-decoration: none;
        transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }

    .button:hover {
        background-color: var(--color-background-surface);
        border-color: var(--color-primary);
    }

    .button:disabled,
    .button.is-disabled {
        background-color: var(--color-state-disabled);
        color: var(--color-foreground-secondary);
        border-color: var(--color-border);
        cursor: not-allowed;
        box-shadow: none;
    }

    .button--primary {
        background-color: var(--color-primary);
        color: var(--color-foreground-on-primary);
        border-color: var(--color-primary);
    }

    .button--primary:hover {
        background-color: var(--color-primary-hover);
        border-color: var(--color-primary-hover);
        box-shadow: var(--shadow-sm);
    }

    .button--danger {
        background-color: var(--color-feedback-danger);
        color: var(--color-foreground-on-primary);
        border-color: var(--color-feedback-danger);
    }

    .button--danger:hover {
        background-color: var(--color-feedback-danger-hover);
        border-color: var(--color-feedback-danger-hover);
        box-shadow: var(--shadow-sm);
    }

    .button--small {
        font-size: var(--font-size-sm);
        padding: var(--pad-xs) var(--pad-sm);
    }

    .button--large {
        font-size: var(--font-size-lg);
        padding: var(--pad-sm) var(--pad-xl);
    }

    /*
    |--------------------------------------------------------------------------
    | Organizing form elements
    |--------------------------------------------------------------------------
    */
    .help-hint {
        font-style: italic;
        font-size: var(--font-size-sm);
        color: var(--color-help);
        margin-block-start: var(--margin-xs);
    }

    .label, legend {
        display: block;
        color: var(--color-help);
        margin-block-end: var(--margin-xs);
        padding: 0;
        border: 0;
        width: 100%;
    }

    .field, fieldset {
        margin-block-end: var(--margin-md);
        padding: 0;
        border: 0;
        min-width: 0;
    }

    .field__item {
        display: flex;
        align-items: center;
        gap: var(--space-xs);
        margin-block-end: var(--margin-xs);
    }

    .field__item > label {
        cursor: pointer;
        color: var(--color-foreground);
        font-weight: var(--font-weight-regular);
        margin-block-end: var(--margin-none);
    }

    /*
    |--------------------------------------------------------------------------
    | Text based input fields
    |--------------------------------------------------------------------------
    */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="search"],
    input[type="url"],
    input[type="tel"],
    textarea,
    select {
        width: 100%;
        padding: var(--pad-sm) var(--pad-md);
        border: var(--border-thickness-base) solid var(--color-border);
        border-radius: var(--radius-sm);

        background-color: var(--color-background-app);
        font-size: var(--font-size-base);
        line-height: var(--line-height-tight);
        vertical-align: middle;

        box-shadow: none;
        transition: border-color 0.2s ease;
    }

    /*
    |--------------------------------------------------------------------------
    | Non-text input fields
    |--------------------------------------------------------------------------
    */
    input[type="checkbox"],
    input[type="radio"] {
        width: auto;
        padding: 0;
        margin: 0;
        border: none;
        cursor: pointer;
    }

    input[type="color"] {
        width: 44px; /* A decent size for tapping/clicking */
        height: 44px;
        padding: 2px;
        border: var(--border-thickness-base) solid var(--color-border);
        border-radius: var(--radius-sm);
    }

    input[type="file"],
    input[type="range"] {
        width: 100%;
    }

    /*
    |--------------------------------------------------------------------------
    | Placeholders
    |--------------------------------------------------------------------------
    */
    input::placeholder,
    textarea::placeholder {
        color: var(--color-foreground-secondary);
        opacity: 1;
    }

    /*
    |--------------------------------------------------------------------------
    | Focus state
    |--------------------------------------------------------------------------
    */
    input:focus,
    textarea:focus,
    select:focus {
        border-color: var(--color-primary);
    }

    /*
    |--------------------------------------------------------------------------
    | Disabled state
    |--------------------------------------------------------------------------
    */
    input:disabled,
    textarea:disabled,
    select:disabled {
        background-color: var(--color-state-disabled);
        color: var(--color-foreground-secondary);
        opacity: 0.8;
        cursor: not-allowed;
    }

    /*
    |--------------------------------------------------------------------------
    | Error state
    |--------------------------------------------------------------------------
    */
    .field.has-error input,
    .field.has-error textarea,
    .field.has-error select,
    fieldset.field.has-error {
        border-color: var(--color-feedback-danger);
        box-shadow: 0 0 0 var(--border-thickness-base) color-mix(in srgb, var(--color-feedback-danger) 50%, transparent);
    }
}