/* Reusable form controls shared between public forms and popups. */

.form-field {
    display: grid;
    gap: var(--space-3);
}

.form-label {
    color: var(--color-secondary);
    font-size: var(--font-size-body-small);
}

.form-control {
    width: 100%;
    min-height: var(--form-control-min-height);
    padding:
        var(--form-control-padding-block)
        var(--form-control-padding-inline);
    border: var(--form-control-border-width) solid var(--color-border);
    border-radius: var(--form-control-border-radius);
    outline: none;
    background: var(--color-background);
    color: var(--color-primary);
    transition: border-color var(--transition-interactive);
}

.form-control::placeholder {
    color: var(--color-tertiary);
}

.form-control:hover,
.form-control:focus {
    border-color: var(--color-border-active);
}

textarea.form-control {
    min-height: var(--form-textarea-min-height);
    resize: vertical;
}

select.form-control {
    cursor: pointer;
}

.form-error {
    color: var(--color-secondary);
    font-size: var(--font-size-body-small);
    margin-left: var(--space-5);
}


.form-stack {
    display: grid;
    gap: var(--space-5);
}

input.form-control--date {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    inline-size: 100%;
    block-size: var(--form-control-min-height);
    min-block-size: var(--form-control-min-height);
    padding:
        var(--form-control-padding-block)
        var(--form-control-padding-inline);
    line-height: var(--line-height-body);
    -webkit-appearance: none;
    appearance: none;
}

input.form-control--date::-webkit-date-and-time-value {
    min-width: 0;
    text-align: left;
}

.form-error--field-gap {
    margin-top: var(--space-1);
}

@media (min-width: 64rem) {
    .form-control {
        padding: var(--space-4);
    }

    input.form-control--date {
        display: block;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        inline-size: 100%;
        block-size: var(--form-control-min-height);
        min-block-size: var(--form-control-min-height);
        padding: var(--space-4);
        line-height: var(--line-height-body);
        -webkit-appearance: none;
        appearance: none;
    }

    .form-stack {
        gap: var(--space-3);
    }
}