/* WIDGETS */
.tt-form :is(input[type="text"], input[type="tel"], input[type="email"],
             input[type="number"], input[type="date"], input[type="time"],
             input[type="password"], input[type="file"], select),
.tt-form-input {
    background-color: var(--bg-color);
    border: var(--border-thin) solid currentColor;
    max-width: 100%;
    width: 100%;
    padding: var(--form-input-padding);
    color: inherit;
    line-height: normal;
    height: var(--form-input-height);
    box-sizing: border-box;
    font-size: var(--form-input-font-size);
}

/* Standalone .tt-form-input outside a scoping class needs an explicit color
   since form controls opt out of color inheritance by default */
.tt-form-input {
    color: var(--paragraph-color);
}

/* PLACEHOLDER */
.tt-form input::placeholder,
.tt-form-input::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

/* RADIO WIDGET */
.radio-group {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-2xs);
    align-items: center;
}

.radio-group label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* FILE WIDGET */
.tt-form input[type="file"] {
    cursor: pointer;
}

/* Hide the default file upload button (optional) */
.tt-form input[type="file"]::-webkit-file-upload-button {
    visibility: hidden;
}

/* Firefox */
.tt-form input[type="file"]::file-selector-button {
    visibility: hidden;
}

.tt-form input[type="checkbox"],
.tt-form-input-checkbox {
    appearance: none;
    position: relative;
    width: var(--step-0);
    height: var(--step-0);
    color: inherit;
    border: var(--border-thin) solid currentColor;
    line-height: 1;
    background: var(--bg-color);
    margin-right: var(--space-3xs);
}

.tt-form input, .tt-form select {
    border-radius: var(--input-border-radius);
}

.tt-form input[type="checkbox"]::before,
.tt-form-input-checkbox::before {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    white-space: pre;
    content: " ";
}

.tt-form input[type="checkbox"]:checked::before,
.tt-form-input-checkbox:checked::before {
    content: "\2713";
    color: var(--primary-color);
    padding-top: 2px;
}

.tt-form input[type="checkbox"]:indeterminate::before,
.tt-form-input-checkbox:indeterminate::before {
    content: "–";
    color: var(--primary-color);
    padding-top: 2px;
}

/* FOCUS */
.tt-form input:focus, .tt-form-input:focus,
.tt-form select:focus .tt-form-select:focus, .tt-form .tt-form-row select:focus,
.tt-form-input-checkbox:focus {
    border-color: var(--primary-color);
}

/* DISABLED */
.tt-form input:disabled,
.tt-form select:disabled {
    border: var(--border-thin) solid var(--text-muted);
    appearance: none;
    background-color: var(--bg-muted);
    color: var(--text-color);
}

/* VALIDATION */
.tt-form input.tt-invalid,
.tt-form select.tt-invalid {
    border: var(--border-thin) solid var(--danger-color);
}

.tt-form input.tt-valid,
.tt-form select.tt-valid:not(.tt-form-helper) {
    border: var(--border-thin) solid var(--success-color);
}

.tt-form .tt-form-helper {
    border: var(--border-thin) solid var(--text-muted)
}
.tt-form .tt-required span {
    color: var(--danger-color);
}

/* BUTTONS */
.tt-form .tt-btn-primary {
    width: 100%;
}

/* FORM ERRORS */
.tt-form-error-list {
    list-style: none;
    margin: 0 0 0 0.3rem; /* small top margin, no sides or bottom */
    padding: 0;
    font-size: 0.875rem; /* slightly smaller text */
    color: var(--danger-color);
}

.tt-form-error {
    margin: 0;
    padding: 0;
}