/*
 * Form controls. Symfony forms get these classes from templates/form/theme.html.twig.
 *
 *   .field          label + control + help + error
 *   .input          text inputs, also on <select> (.select) and <textarea> (.textarea)
 *   .check          checkbox or radio with its label; .switch for a toggle
 *   .input-group    control with addons (text or buttons) on its sides
 */
@layer components {
    .field {
        display: flex;
        flex-direction: column;
        gap: var(--space-1-5);
        margin-bottom: var(--space-5);
    }

    .field-label {
        font: var(--text-label-font-weight) var(--text-label-font-size) / var(--text-label-line-height) var(--text-label-font-family);
        color: var(--color-text);
    }

    .field-label.required::after {
        content: ' *';
        color: var(--color-danger);
    }

    .field-help {
        margin: 0;
        font-size: var(--font-size-sm);
        color: var(--color-text-muted);
    }

    .field-error {
        display: flex;
        align-items: center;
        gap: var(--space-1-5);
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: var(--font-size-sm);
        color: var(--color-danger);
    }

    .input,
    .select,
    .textarea {
        --input-bg: var(--color-bg-surface);
        --input-border: var(--color-border-strong);
        --input-height: var(--control-height-md);

        display: block;
        width: 100%;
        min-height: var(--input-height);
        padding: var(--space-2) var(--space-3);
        border: var(--input-border-width) solid var(--input-border);
        border-radius: var(--input-radius);
        background: var(--input-bg);
        color: var(--color-text);
        font-size: var(--font-size-md);
        line-height: var(--font-line-height-snug);
        transition: border-color var(--duration-fast) var(--easing-standard), box-shadow var(--duration-fast) var(--easing-standard);
    }

    .input::placeholder,
    .textarea::placeholder {
        color: var(--color-text-subtle);
    }

    .input:hover,
    .select:hover,
    .textarea:hover {
        --input-border: var(--color-text-subtle);
    }

    .input:focus-visible,
    .select:focus-visible,
    .textarea:focus-visible {
        --input-border: var(--color-border-focus);
        outline: none;
        box-shadow: 0 0 0 var(--focus-ring-width) var(--color-primary-subtle-hover);
    }

    .input:disabled,
    .select:disabled,
    .textarea:disabled {
        opacity: var(--opacity-disabled);
        cursor: not-allowed;
    }

    .input[aria-invalid="true"],
    .select[aria-invalid="true"],
    .textarea[aria-invalid="true"] {
        --input-border: var(--color-danger);
    }

    .input-sm { --input-height: var(--control-height-sm); font-size: var(--font-size-sm); }
    .input-lg { --input-height: var(--control-height-lg); font-size: var(--font-size-lg); }

    .textarea {
        min-height: 6rem;
        resize: vertical;
    }

    .select {
        appearance: none;
        padding-right: var(--space-8);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right var(--space-2) center;
        background-size: 1.1em;
    }

    .select[multiple] {
        padding-right: var(--space-3);
        background-image: none;
    }

    /* Checkboxes and radios. */
    .check {
        display: flex;
        align-items: flex-start;
        gap: var(--space-2);
        cursor: pointer;
    }

    .check input {
        flex: none;
        width: 1.1rem;
        height: 1.1rem;
        margin: 0.2em 0 0;
        accent-color: var(--color-primary);
        cursor: inherit;
    }

    .check-group {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    /* Toggle switch: <label class="check switch"><input type="checkbox" role="switch"> …</label> */
    .switch input {
        appearance: none;
        position: relative;
        width: 2.25rem;
        height: 1.25rem;
        margin-top: 0.1em;
        border-radius: var(--radius-full);
        background: var(--color-bg-muted);
        transition: background-color var(--duration-fast) var(--easing-standard);
    }

    .switch input::before {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: calc(1.25rem - 4px);
        height: calc(1.25rem - 4px);
        border-radius: 50%;
        background: var(--color-bg-surface);
        box-shadow: var(--shadow-sm);
        transition: transform var(--duration-fast) var(--easing-standard);
    }

    .switch input:checked {
        background: var(--color-primary);
    }

    .switch input:checked::before {
        transform: translateX(1rem);
    }

    /* Input with addons: <div class="input-group"><span class="input-addon">CHF</span><input class="input"></div> */
    .input-group {
        display: flex;
        align-items: stretch;
    }

    .input-group > .input {
        flex: 1;
        min-width: 0;
    }

    .input-group > :not(:first-child) {
        margin-left: calc(-1 * var(--border-width-thin));
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .input-group > :not(:last-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .input-addon {
        display: flex;
        align-items: center;
        padding: 0 var(--space-3);
        border: var(--input-border-width) solid var(--color-border-strong);
        border-radius: var(--input-radius);
        background: var(--color-bg-subtle);
        color: var(--color-text-muted);
        font-size: var(--font-size-sm);
    }

    .field-counter {
        align-self: flex-end;
        font-size: var(--font-size-xs);
        color: var(--color-text-subtle);
        font-variant-numeric: tabular-nums;
    }

    .field-counter.is-over {
        color: var(--color-danger);
    }

    fieldset {
        margin: 0 0 var(--space-5);
        padding: 0;
        border: 0;
    }

    legend {
        margin-bottom: var(--space-2);
        padding: 0;
        font: var(--text-label-font-weight) var(--text-label-font-size) / var(--text-label-line-height) var(--text-label-font-family);
    }

    /* Actions at the bottom of a form. */
    .form-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: var(--space-3);
        margin-top: var(--space-6);
    }
}