/* ==========================================================================
   Bimotix forms
   ========================================================================== */

/* --------------------------------------------------------------------------
   Form structure
   -------------------------------------------------------------------------- */

.bx-form-group {
    margin-bottom: var(--bx-space-5);
}

.bx-form-label {
    display: block;

    margin-bottom: 7px;

    color: var(--bx-text-primary);

    font-size: var(--bx-font-size-sm);
    font-weight: 650;
}

/* --------------------------------------------------------------------------
   Controls
   -------------------------------------------------------------------------- */

.bx-form-control,
.bx-form-select {
    width: 100%;
    min-height: 46px;
    padding: 10px 13px;

    color: var(--bx-text-primary);
    background: var(--bx-surface);

    border: 1px solid var(--bx-border-strong);
    border-radius: var(--bx-radius-md);

    font-family: inherit;
    font-size: var(--bx-font-size-md);

    transition:
        border-color var(--bx-transition),
        box-shadow var(--bx-transition),
        background-color var(--bx-transition);
}

textarea.bx-form-control {
    min-height: 120px;
    resize: vertical;
}

.bx-form-control:focus,
.bx-form-select:focus {
    outline: none;

    border-color: var(--bx-primary);
    box-shadow: var(--bx-focus-ring);
}

.bx-form-control:disabled,
.bx-form-select:disabled {
    color: var(--bx-text-muted);
    background: var(--bx-surface-secondary);

    cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Help and validation
   -------------------------------------------------------------------------- */

.bx-form-help {
    margin-top: 7px;

    color: var(--bx-text-secondary);

    font-size: var(--bx-font-size-xs);
    line-height: 1.5;
}

.bx-form-error {
    margin-top: 7px;

    color: var(--bx-danger);

    font-size: var(--bx-font-size-xs);
    font-weight: 600;
}

.bx-form-control.is-invalid,
.bx-form-select.is-invalid {
    border-color: var(--bx-danger);
}

.bx-form-control.is-invalid:focus,
.bx-form-select.is-invalid:focus {
    border-color: var(--bx-danger);
    box-shadow: 0 0 0 4px var(--bx-danger-soft);
}

/* --------------------------------------------------------------------------
   Bootstrap form compatibility
   -------------------------------------------------------------------------- */

.form-label {
    margin-bottom: 7px;

    color: var(--bx-text-primary);

    font-size: var(--bx-font-size-sm);
    font-weight: 650;
}

.form-control,
.form-select {
    min-height: 46px;
    padding: 10px 13px;

    color: var(--bx-text-primary);
    background: var(--bx-surface);

    border: 1px solid var(--bx-border-strong);
    border-radius: var(--bx-radius-md);

    font-family: inherit;
    font-size: var(--bx-font-size-md);

    transition:
        border-color var(--bx-transition),
        box-shadow var(--bx-transition),
        background-color var(--bx-transition);
}

.form-control:focus,
.form-select:focus {
    color: var(--bx-text-primary);
    background: var(--bx-surface);

    border-color: var(--bx-primary);
    box-shadow: var(--bx-focus-ring);
}

.form-control:disabled,
.form-select:disabled {
    color: var(--bx-text-muted);
    background: var(--bx-surface-secondary);

    cursor: not-allowed;
}

.form-text {
    margin-top: 7px;

    color: var(--bx-text-secondary);

    font-size: var(--bx-font-size-xs);
    line-height: 1.5;
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--bx-danger);
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: var(--bx-danger);
    box-shadow: 0 0 0 4px var(--bx-danger-soft);
}

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

.input-group .form-control {
    border-radius: var(--bx-radius-md) 0 0 var(--bx-radius-md);
}

.input-group .btn {
    min-width: 48px;

    border-radius: 0 var(--bx-radius-md) var(--bx-radius-md) 0;
}