/**
 * Bootstrap 5.2.3 form subset for Symfony bootstrap_5_horizontal_layout.
 * Source baseline: https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css
 */

:root {
    /* -------------------------------------------------------------------------
     * Kleuren definieren
     * ------------------------------------------------------------------------- */
    --col-form-control-bg: #fff;
    --col-form-control-disabled-bg: #e9ecef;
    --col-form-control-disabled-border: #ced4da;
    --col-form-control-border: #ced4da;
    --col-form-control-placeholder: #6c757d;
    --col-form-valid: #198754;
    --col-form-valid-soft: #badbcc;
    --col-form-invalid: #dc3545;
    --col-form-invalid-soft: #f8d7da;
    --col-form-focus-ring: rgb(13 110 253 / 0.25);
    --col-form-focus-border: #86b7fe;

    /* -------------------------------------------------------------------------
     * Kleuren toewijzen
     * ------------------------------------------------------------------------- */
    --form-control-bg: var(--col-form-control-bg);
    --form-control-border-color: var(--col-form-control-border);
    --form-control-placeholder-color: var(--col-form-control-placeholder);
    --form-control-disabled-bg: var(--col-form-control-disabled-bg);
    --form-control-disabled-border-color: var(--col-form-control-disabled-border);
    --form-control-focus-border-color: var(--col-form-focus-border);
    --form-control-focus-shadow-color: var(--col-form-focus-ring);
    --form-feedback-valid-color: var(--col-form-valid);
    --form-feedback-invalid-color: var(--col-form-invalid);
    --form-feedback-valid-bg: var(--col-form-valid-soft);
    --form-feedback-invalid-bg: var(--col-form-invalid-soft);

    /* -------------------------------------------------------------------------
     * Spacing definieren
     * ------------------------------------------------------------------------- */
    --space-form-y-sm: 0.25rem;
    --space-form-y-md: 0.375rem;
    --space-form-x-md: 0.75rem;
    --space-form-gap-md: 0.5rem;
    --space-form-margin-bottom: 1rem;

    /* -------------------------------------------------------------------------
     * Spacing toewijzen
     * ------------------------------------------------------------------------- */
    --form-control-padding-y: var(--space-form-y-md);
    --form-control-padding-x: var(--space-form-x-md);
    --form-select-padding-y: var(--space-form-y-md);
    --form-select-padding-x: var(--space-form-x-md);
    --form-check-margin-bottom: var(--space-form-gap-md);
    --form-group-margin-bottom: var(--space-form-margin-bottom);

    /* -------------------------------------------------------------------------
     * Typografie definieren
     * ------------------------------------------------------------------------- */
    --font-form-size-base: inherit;
    --font-form-line-height: inherit;
    --font-form-feedback-size: 0.875em;
    --font-form-label-weight: 400;

    /* -------------------------------------------------------------------------
     * Typografie toewijzen
     * ------------------------------------------------------------------------- */
    --form-control-font-size: var(--font-form-size-base);
    --form-control-line-height: var(--font-form-line-height);
    --form-feedback-font-size: var(--font-form-feedback-size);
}

/* ---- Form groups ---- */

.mb-3 {
    margin-bottom: var(--form-group-margin-bottom) !important;
}

/* ---- Labels ---- */

.form-label {
    margin-bottom: var(--space-form-gap-md);
    font-weight: var(--font-form-label-weight);
}

.col-form-label {
    padding-top: calc(var(--space-form-y-md) + 1px);
    padding-bottom: calc(var(--space-form-y-md) + 1px);
    margin-bottom: 0;
}

/* ---- Text inputs / textarea ---- */

.form-control {
    display: block;
    width: 100%;
    padding: var(--form-control-padding-y) var(--form-control-padding-x);
    font-size: var(--form-control-font-size);
    font-weight: inherit;
    line-height: var(--form-control-line-height);
    color: inherit;
    background-color: var(--form-control-bg);
    background-clip: padding-box;
    border: 1px solid var(--form-control-border-color);
    appearance: none;
    border-radius: 0.375rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

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

.form-control:focus {
    color: inherit;
    background-color: var(--form-control-bg);
    border-color: var(--form-control-focus-border-color);
    outline: 0;
    box-shadow: 0 0 0 0.25rem var(--form-control-focus-shadow-color);
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--form-control-disabled-bg);
    border-color: var(--form-control-disabled-border-color);
    opacity: 1;
}

textarea.form-control {
    min-height: calc(1.5em + 0.75rem + 2px);
}

/* ---- Select ---- */

.form-select {
    display: block;
    width: 100%;
    padding: var(--form-select-padding-y) calc(var(--form-select-padding-x) * 3) var(--form-select-padding-y) var(--form-select-padding-x);
    font-size: var(--form-control-font-size);
    font-weight: inherit;
    line-height: var(--form-control-line-height);
    color: inherit;
    background-color: var(--form-control-bg);
    border: 1px solid var(--form-control-border-color);
    border-radius: 0.375rem;
    appearance: none;
}

.form-select:focus {
    border-color: var(--form-control-focus-border-color);
    outline: 0;
    box-shadow: 0 0 0 0.25rem var(--form-control-focus-shadow-color);
}

/* ---- Checkboxes / radios ---- */

.form-check {
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5em;
    margin-bottom: var(--form-check-margin-bottom);
}

.form-check .form-check-input {
    float: left;
    margin-left: -1.5em;
}

.form-check-input {
    width: 1em;
    height: 1em;
    margin-top: var(--space-form-y-sm);
    vertical-align: top;
    background-color: var(--form-control-bg);
    border: 1px solid rgb(0 0 0 / 0.25);
    appearance: none;
    print-color-adjust: exact;
}

.form-check-input[type="checkbox"] {
    border-radius: 0.25em;
}

.form-check-input[type="radio"] {
    border-radius: 50%;
}

.form-check-input:focus {
    border-color: var(--form-control-focus-border-color);
    outline: 0;
    box-shadow: 0 0 0 0.25rem var(--form-control-focus-shadow-color);
}

.form-check-input:checked {
    background-color: var(--u-primary);
    border-color: var(--u-primary);
}

.form-check-input:disabled {
    pointer-events: none;
    filter: none;
    opacity: 0.5;
}

.form-check-label {
    color: inherit;
}

/* ---- Input groups ---- */

.input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}

.input-group > .form-control,
.input-group > .form-select {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: var(--space-form-y-md) var(--space-form-x-md);
    font-size: var(--form-control-font-size);
    font-weight: inherit;
    line-height: var(--form-control-line-height);
    color: inherit;
    text-align: center;
    white-space: nowrap;
    background-color: var(--form-control-disabled-bg);
    border: 1px solid var(--form-control-border-color);
    border-radius: 0.375rem;
}

/* ---- Help + feedback ---- */

.form-text {
    margin-top: var(--space-form-y-sm);
    font-size: var(--form-feedback-font-size);
    color: var(--text-muted-utility);
}

.valid-feedback,
.invalid-feedback {
    display: none;
    width: 100%;
    margin-top: var(--space-form-y-sm);
    font-size: var(--form-feedback-font-size);
}

.valid-feedback {
    color: var(--form-feedback-valid-color);
}

.invalid-feedback {
    color: var(--form-feedback-invalid-color);
}

.is-valid ~ .valid-feedback,
.is-invalid ~ .invalid-feedback {
    display: block;
}

.form-control.is-valid,
.was-validated .form-control:valid {
    border-color: var(--form-feedback-valid-color);
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--form-feedback-invalid-color);
}

.form-select.is-valid,
.was-validated .form-select:valid {
    border-color: var(--form-feedback-valid-color);
}

.form-select.is-invalid,
.was-validated .form-select:invalid {
    border-color: var(--form-feedback-invalid-color);
}