/* =============================================================================
   Warp form fields
   A field is a label, a control and a message line for help and errors. The
   label is always visible; a placeholder never replaces it. Heights follow
   --warp-control-height, the density token.
   ============================================================================= */

.warp-field {
    display: grid;
    grid-template-columns: var(--warp-field-label-width, 140px) minmax(0, 1fr);
    column-gap: var(--warp-spacing-3);
    margin-bottom: var(--warp-field-gap);

    & > .warp-field-label {
        line-height: var(--warp-control-height);
    }

    & > .warp-field-control,
    & > .warp-field-message {
        grid-column: 2;
    }
}

/* Label above the control: narrow places, modals, the login page */
.warp-field--above {
    grid-template-columns: minmax(0, 1fr);

    & > .warp-field-label {
        line-height: var(--warp-line-height-normal);
        margin-bottom: var(--warp-spacing-0-5);
    }

    & > .warp-field-control,
    & > .warp-field-message {
        grid-column: 1;
    }
}

.warp-field-label {
    font-size: var(--warp-font-size-sm);
    font-weight: var(--warp-font-weight-medium);
    color: var(--warp-color-gray-700);
}

.warp-field-required {
    color: var(--warp-color-danger-700);
    margin-left: var(--warp-spacing-0-5);
}

.warp-field-message {
    font-size: var(--warp-font-size-xs);
    color: var(--warp-color-gray-500);

    &:not(:empty) {
        padding-top: var(--warp-spacing-0-5);
    }
}

.warp-field-error {
    display: flex;
    align-items: center;
    gap: var(--warp-spacing-1);
    color: var(--warp-color-danger-700);
}

/* The value, in view mode */
.warp-field-value {
    display: flex;
    align-items: center;
    min-height: var(--warp-control-height);
    color: var(--warp-color-gray-900);
}

.warp-field-empty {
    color: var(--warp-color-gray-500);
}

/* =============================================================================
   Controls
   ============================================================================= */

.warp-input,
.warp-select,
.warp-textarea {
    width: 100%;
    max-width: var(--warp-control-width, 16rem);
    height: var(--warp-control-height);
    padding: 0 var(--warp-spacing-2);
    font-family: var(--warp-font-family-sans);
    font-size: var(--warp-font-size-sm);
    color: var(--warp-color-gray-900);
    background-color: var(--warp-color-white);
    border: 1px solid var(--warp-color-control-border);
    border-radius: var(--warp-radius-default);
    transition: border-color var(--warp-transition-fast), box-shadow var(--warp-transition-fast);

    &:hover {
        border-color: var(--warp-color-gray-600);
    }

    &:focus {
        outline: none;
        border-color: var(--warp-color-primary-600);
        box-shadow: 0 0 0 3px color-mix(in oklch, var(--warp-color-primary-600) 25%, transparent);
    }

    &:disabled,
    &[readonly] {
        background-color: var(--warp-color-gray-100);
        color: var(--warp-color-gray-600);
        cursor: not-allowed;
    }

    .warp-field--error & {
        border-color: var(--warp-color-danger-500);

        &:focus {
            box-shadow: 0 0 0 3px color-mix(in oklch, var(--warp-color-danger-500) 25%, transparent);
        }
    }
}

/* Widths, the same in every form */
.warp-control--sm { --warp-control-width: 8rem; }
.warp-control--md { --warp-control-width: 16rem; }
.warp-control--lg { --warp-control-width: 28rem; }
.warp-control--full { --warp-control-width: 100%; }

.warp-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23676767' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right var(--warp-spacing-2) center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    padding-right: var(--warp-spacing-8);
}

.warp-textarea {
    height: auto;
    min-height: calc(var(--warp-control-height) * 3);
    padding: var(--warp-spacing-1) var(--warp-spacing-2);
    resize: vertical;
}

.warp-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--warp-spacing-2);
    min-height: var(--warp-control-height);
    cursor: pointer;

    & input[type="checkbox"] {
        width: 16px;
        height: 16px;
        margin: 0;
        accent-color: var(--warp-color-primary-600);
        cursor: pointer;
    }
}