/* FitUI V2 — Forms */

.fit-form-field,
.fit-field,
.fit-form-group {
    display: grid;
    gap: 9px;
}

.fit-form-field label,
.fit-field label,
.fit-form-group label,
.fit-label {
    color: var(--fit-text-soft);
    font-size: var(--fit-text-md);
    font-weight: var(--fit-weight-bold);
    letter-spacing: .035em;
}

.fit-input,
.fit-select,
.fit-textarea,
.fit-form-group input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]),
.fit-form-group select,
.fit-form-group textarea,
.fit-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.fit-form select,
.fit-form textarea {
    width: 100%;
    min-height: 52px;
    padding: 12px 16px;
    border: 1px solid var(--fit-border);
    border-radius: var(--fit-radius-sm);
    background: rgba(0, 0, 0, .22);
    box-shadow: var(--fit-shadow-inset);
    color: var(--fit-text);
    font-size: var(--fit-text-base);
    caret-color: var(--fit-gold);
    transition:
        border-color var(--fit-duration-fast) ease,
        background var(--fit-duration-fast) ease,
        box-shadow var(--fit-duration-fast) ease;
}

.fit-input::placeholder,
.fit-textarea::placeholder,
.fit-form-group input::placeholder,
.fit-form-group textarea::placeholder,
.fit-form input::placeholder,
.fit-form textarea::placeholder {
    color: var(--fit-text-faint);
}

.fit-input:hover,
.fit-select:hover,
.fit-textarea:hover,
.fit-form-group input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]):hover,
.fit-form-group select:hover,
.fit-form-group textarea:hover,
.fit-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):hover,
.fit-form select:hover,
.fit-form textarea:hover {
    border-color: var(--fit-border-strong);
}

.fit-input:focus,
.fit-select:focus,
.fit-textarea:focus,
.fit-form-group input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]):focus,
.fit-form-group select:focus,
.fit-form-group textarea:focus,
.fit-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus,
.fit-form select:focus,
.fit-form textarea:focus {
    outline: 0;
    border-color: var(--fit-border-gold);
    background: rgba(0, 0, 0, .30);
    box-shadow: 0 0 0 4px rgba(var(--fit-gold-rgb), .09), var(--fit-shadow-inset);
}

.fit-textarea,
.fit-form-group textarea,
.fit-form textarea {
    min-height: 140px;
    resize: vertical;
}

.fit-select,
.fit-form-group select,
.fit-form select {
    color-scheme: dark;
}

.fit-help,
.fit-field-help {
    color: var(--fit-text-subtle);
    font-size: var(--fit-text-sm);
    line-height: 1.5;
}

.fit-field-error {
    color: var(--fit-danger);
    font-size: var(--fit-text-sm);
}