:root {
    --form-element-height-sm: clamp(2rem, 1.8rem + 0.6vw, 2.25rem);
    --form-element-height-md: clamp(2.5rem, 2.1rem + 0.8vw, 3rem);
    --form-element-height-lg: clamp(3rem, 2.5rem + 1vw, 3.5rem);
}

.tt-form {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;

    /* label */
    --form-label-font-size: var(--step-0);
    --form-label-color: var(--paragraph-color);

    /* input */
    --form-input-font-size: var(--step-0);
    --form-input-height: var(--form-element-height-lg);
    --form-input-color: var(--paragraph-color);
    --form-input-padding: var(--space-3xs);
    --form-input-background-color: var(--bg-color);
    --form-input-border-color: var(--paragraph-color);

    /* row */
    --form-row-margin-bottom: var(--space-2xs);

    /* buttons */
    --form-button-padding: var(--button-padding-lg);
    --form-button-radius: var(--button-radius-lg);
}

/* SIZES */
.tt-form--medium {
    --form-label-font-size: var(--step--1);
    --form-input-font-size: var(--step--1);
    --form-input-height: var(--form-element-height-md);
    --form-row-margin-bottom: var(--space-2xs);

    /* buttons */
    --form-button-padding: var(--button-padding-md);
    --form-button-radius: var(--button-radius-md);
}
.tt-form--small {
    --form-label-font-size: var(--step--1);
    --form-input-font-size: var(--step--1);
    --form-input-height: var(--form-element-height-sm);
    --form-row-margin-bottom: var(--space-2xs);

    /* buttons */
    --form-button-padding: var(--button-padding-sm);
    --form-button-radius: var(--button-radius-sm);
}

/* BUTTON SIZES */
.tt-form .tt-btn {
    height: var(--form-input-height);
    font-weight: var(--form-input-font-size);
    padding: var(--form-button-padding);
    border-radius: var(--form-button-radius);
}

/* LAYOUT */

.tt-form .tt-form-row {
    width: 100%;
    margin-bottom: var(--form-row-margin-bottom);
}

.tt-form .grid-base-md,
.tt-form .grid-base {
    width: 100%;
    row-gap: 0;
}

/* FORM GRID */
.tt-form-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--form-row-margin-bottom);
    margin-bottom: var(--form-row-margin-bottom);
    width: 100%;
    align-items: flex-start;
}
.tt-form-grid .tt-form-grid-item {
    display: flex; /* needed if items are input groups */
    flex: 0 0 auto;
}

.tt-form-grid .tt-form-grid-item--auto {
    flex: 1 1 0;   /* default: grow and shrink equally */
}

/* Grid items inside the form grid */
.tt-form-grid > .tt-form-row {
    flex: 1 1 auto;                 /* default: grow to fill space */
    min-width: 16rem;               /* don't shrink below this */
}

/* RESET BUTTON WIDTH AND MARGIN */
.tt-form .tt-btn,
.tt-form.tt-form--medium .tt-btn,
.tt-form.tt-form--small .tt-btn
{
    width: fit-content;
    margin: 0;
}

/* LABEL */
.tt-form label, .tt-form .tt-label {
    color: var(--form-label-color);
}

.tt-form label:not(.tt-checkbox-label, .tt-helper-label),
.tt-form .tt-label {
    width: 100%;
    font-weight: normal;
    font-size: var(--form-label-font-size);
    line-height: 1.4;
    max-width: 60ch;
    margin-bottom: 0;
}

.tt-form .tt-checkbox-label,
.tt-form .tt-label .tt-checkbox-label {
    display: inline;
}

.tt-form label.tt-helper-label {
    display: block;
    font-weight: normal;
    font-size: var(--step--2);
    color: var(--form-label-color);
    margin: 0;
}
.tt-placeholder-label::before {
    content: "\00A0";
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.tt-sr-only {
    position: absolute !important;   /* remove from flex layout */
    width: 1px !important;           /* minimal width for screen readers */
    height: 1px !important;          /* minimal height */
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    pointer-events: none;            /* prevent accidental interaction */
}

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

.tt-form input[type="checkbox"],
.tt-form-input-checkbox {
    appearance: none;
    position: relative;
    width: var(--step-0);
    height: var(--step-0);
    border: 1px solid var(--form-input-border-color);
    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;
}

/* 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: 1px 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: 1px solid var(--danger-color);
}

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

.tt-form .tt-form-helper {
    border: 1px 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;
}

/* INPUT GROUP */
.tt-input-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
}
.tt-input-group input,
.tt-input-group select,
.tt-input-group button,
.tt-input-group .tt-btn,
.tt-input-group .tt-btn-sm,
.tt-input-group .tt-btn-md,
.tt-input-group .tt-btn-lg {
    flex: 1;
    border-radius: 0;
    margin-left: 0;
    margin-right: 0;
}

    /* Radius on children */
    .tt-form .tt-input-group .tt-btn,
    .tt-input-group .tt-btn {
        border-radius: 0;
    }
    .tt-form .tt-input-group > *:first-child,
    .tt-input-group > *:first-child {
        border-top-left-radius: var(--input-border-radius);
        border-bottom-left-radius: var(--input-border-radius);
    }
    .tt-form .tt-input-group > *:last-child,
    .tt-input-group > *:last-child {
        border-top-right-radius: var(--input-border-radius);
        border-bottom-right-radius: var(--input-border-radius);
    }

    /* Border left 0 on children */
    .tt-input-group > input[type="text"]:not(:first-child),
    .tt-input-group > input[type="date"]:not(:first-child),
    .tt-input-group > input[type="checkbox"]:not(:first-child),
    .tt-input-group > .prefix-icon:not(:first-child),
    .tt-input-group > * + *,
    .tt-form .tt-input-group > * + * {
        border-left: 0;
    }

    .tt-input-group > * {
        min-height: var(--form-input-height);
    }
.tt-input-group .choices {
    flex: 1 1 auto;
}

.prefix-icon,
.addon-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    background: var(--prefix-icon);
    border: 1px solid var(--form-input-border-color);
    color: var(--bg-color);
    min-width: 3rem;
}
.addon-toggle.off {
    background-color: var(--bg-muted);
    color: var(--paragraph-color);
}

.addon-toggle.on {
    background-color: var(--primary-color);
    color: var(--bg-color);
}

.tt-input-group input[type="submit"],
.tt-input-group .tt-btn {
    width: fit-content;
    flex: 0 0 auto;
    padding: var(--space-3xs) var(--space-2xs);
}
.tt-input-group input[type="submit"]:disabled {
    border-left: 0;
    border-color: var(--form-input-border-color);
}

.tt.input-group .tt-width-fit-content,
.tt-input-group select.tt-width-fit-content {
    width: fit-content;
    flex: 0 0 auto;
}

    /* Checkboxes in groups */
    .tt-input-group input[type="checkbox"] {
        flex: 0 0 auto;
        width: var(--step-3);
        height: var(--form-input-height);
        margin: 0;
        vertical-align: center;
    }

    .tt-input-group input[type="checkbox"]:checked::before {
        content: "\2713";
        color: var(--paragraph-color);
        font-size: var(--step-2);
    }

/* For mixing tt form and bootstrap input group */
.tt-form .input-group input {
    flex: 1;
}