/* INPUT GROUP */
.tt-input-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    color: var(--paragraph-color);
}
.tt-input-group input[type="text"],
.tt-input-group input[type="password"],
.tt-input-group input[type="search"]:where(:not(.choices__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,
    .tt-form .tt-input-group input[type="file"] {
        border-radius: 0;
    }
    .tt-form .tt-input-group > *:first-child,
    .tt-form .tt-input-group > input[type="file"]:first-child,
    .tt-input-group > :is(*, input[type="text"], input[type="password"], input[type="search"], select):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 > :is(*, input[type="text"], input[type="password"], input[type="search"], select):last-child {
        border-top-right-radius: var(--input-border-radius);
        border-bottom-right-radius: var(--input-border-radius);
    }
    /* pass right radius through to buttons inside a wrapper div (e.g. reveal-element targets) */
    .tt-input-group > div:last-child > :is(.tt-btn, input[type="button"], input[type="submit"]),
    .tt-form .tt-input-group > div:last-child > :is(.tt-btn, input[type="button"], input[type="submit"]) {
        border-top-right-radius: var(--input-border-radius);
        border-bottom-right-radius: var(--input-border-radius);
    }
    /* when the last-child wrapper div is hidden, round the right side of the visible input/select */
    .tt-input-group:has(> div:last-child[style*="display: none"]) > select,
    .tt-input-group:has(> div:last-child[style*="display: none"]) .choices__inner {
        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 > input[type="search"]: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);
    }

/* Input / select styling — works inside and outside .tt-form.
   input[type="search"] skips the inputs Choices.js owns; :where() keeps the guard at
   zero specificity. Same reasoning as the head of form-inputs.css — without it the
   Choices search box renders as a full-height bordered field inside .choices__inner. */
.tt-input-group :is(input[type="text"], input[type="password"], input[type="number"],
                    input[type="date"], input[type="time"], input[type="email"],
                    input[type="tel"], input[type="search"]:where(:not(.choices__input)),
                    select) {
    height: var(--form-input-height);
    padding: var(--form-input-padding);
    font-size: var(--form-input-font-size);
    background-color: var(--bg-color);
    border: var(--border-thin) solid currentColor;
    color: inherit;
    box-sizing: border-box;
}

/* FOCUS
   Without an author focus style these controls fall back to the UA ring, which is
   outline-style: auto. That value is UA-defined and draws its own rounded rectangle
   regardless of border-radius, so inside a group it reads as a pill floating between
   the neighbours instead of following the group's shape (it is also a fixed blue,
   off-brand in light and clashing in dark). An author outline does inherit the
   element's border-radius, so it squares off at the seams like the border does.

   Geometry: a negative outline-offset paints the band from (offset - width) to
   (offset), measured inward from the border edge — so the offset magnitude must be at
   least the width or the ring spills outside the control and onto its neighbour.
   Keeping them equal pins the ring to the outermost 2px of the box, growing inward.

   Outline rather than a thicker border keeps it reflow-free. The border also goes
   primary: the ring covers it while focused, but it is what shows if the outline is
   ever dropped.

   This lives here, not in the FOCUS block of form-inputs.css, because the
   .tt-input-group rules above already beat .tt-form input:focus — equal specificity,
   and form-widgets.css loads later — which is why the DS focus colour never showed
   on a grouped input even inside a .tt-form. */
.tt-input-group :is(input, select, textarea):focus {
    outline: var(--border-md) solid var(--primary-color);
    outline-offset: calc(var(--border-md) * -1);
    border-color: var(--primary-color);
}

.tt-input-group input::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

/* dropdown wrapper — behaves as a single flex cell */
.tt-input-group > .dropdown {
    display: flex;
    align-items: stretch;
}

/* trigger button fills the wrapper in both axes */
.tt-input-group > .dropdown > button,
.tt-input-group > .dropdown > .tt-btn {
    flex: 1;
    margin: 0;
    border-radius: 0;
    align-self: stretch;
    min-height: var(--form-input-height);
}

/* strip left border from button when dropdown is not the first group item */
.tt-input-group > * + .dropdown > button,
.tt-input-group > * + .dropdown > .tt-btn,
.tt-form .tt-input-group > * + .dropdown > button,
.tt-form .tt-input-group > * + .dropdown > .tt-btn {
    border-left: 0;
}

/* rounded corners pass through to the trigger button */
.tt-input-group > .dropdown:first-child > button,
.tt-input-group > .dropdown:first-child > .tt-btn,
.tt-form .tt-input-group > .dropdown:first-child > button,
.tt-form .tt-input-group > .dropdown:first-child > .tt-btn {
    border-top-left-radius: var(--input-border-radius);
    border-bottom-left-radius: var(--input-border-radius);
}

.tt-input-group > .dropdown:last-child > button,
.tt-input-group > .dropdown:last-child > .tt-btn,
.tt-form .tt-input-group > .dropdown:last-child > button,
.tt-form .tt-input-group > .dropdown:last-child > .tt-btn {
    border-top-right-radius: var(--input-border-radius);
    border-bottom-right-radius: var(--input-border-radius);
}

/* choices */
.tt-input-group .choices {
    flex: 1 1 auto;
}

.prefix-icon,
.addon-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3xs) var(--space-2xs);
    background: var(--prefix-icon);
    border: var(--border-thin) solid var(--paragraph-color);
    color: var(--bg-color);
    /* Track the size context instead of a fixed 3rem: at --sm the flat 3rem made the
       addon wider than the group is tall, so it read as an oversized slab. Matching
       the control height keeps it square at every size. font-size carries text addons
       (@, "On") along with the glyph below.

       The glyph is sized off the control height rather than the font: .tt-icon is
       1.25em and font-size does not track the size context, so a --sm icon rendered
       at nearly the same px as a --lg one inside a box two thirds the height.

       This must be declared here and not on :root — a custom property is substituted
       where it is DECLARED, so a :root definition would resolve var(--form-input-height)
       against :root's lg value and inherit that fixed result into every size context. */
    --form-addon-icon-size: calc(var(--form-input-height) * 0.42);
    min-width: var(--form-input-height);
    font-size: var(--form-input-font-size);
}

/* svg, not just .tt-icon: some addons render <twig:ux:icon> directly, without the
   default class. The em margin .tt-icon carries is dead weight here — the flex box
   already centres the glyph. */
.prefix-icon svg,
.addon-toggle svg {
    width: var(--form-addon-icon-size);
    height: var(--form-addon-icon-size);
    margin: 0;
}
.addon-toggle.off {
    background-color: var(--bg-muted);
    color: var(--paragraph-color);
}

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

/* Visually masks a text input's value without switching it to type="password",
   which would trigger the browser's saved-password autofill suggestions. */
.tt-text-masked {
    -webkit-text-security: disc;
    text-security: disc;
}

.tt-sensitive-dots {
    flex: 1;
    display: inline-flex;
    align-items: center;
    padding: var(--form-input-padding);
    height: var(--form-input-height);
    min-height: var(--form-input-height);
    background-color: var(--bg-color);
    border: var(--border-thin) solid currentColor;
    color: inherit;
    font-size: var(--form-input-font-size);
    box-sizing: border-box;
    user-select: none;
}

.tt-input-group input[type="submit"],
.tt-input-group .tt-btn {
    height: var(--form-input-height);
    padding: var(--form-button-padding);
    font-size: var(--form-input-font-size);
    width: fit-content;
    flex: 0 0 auto;
    margin: 0;
}
.tt-input-group input[type="submit"]:disabled,
.tt-input-group input[type="password"] {
    border-left: 0;
    border-color: currentColor;
}

.tt-form .tt-input-group button {
    border-color: var(--paragraph-color);
}

.tt-form .tt-input-group button:hover {
    border-color: var(--paragraph-color);
}

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

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

/* FILTERS */
.tt-filter-menu {
    /*min-width: 260px;*/
    padding: var(--step--2);
    background-color: var(--bg-color);
    color: var(--paragraph-color);
    border-color: var(--border-muted);
}

.tt-filter-group + .tt-filter-group {
    margin-top: var(--step--4);
    padding-top: var(--step--4);
    border-top: var(--border-thin) solid var(--border-muted);
}

.tt-filter-title {
    font-size: var(--step--2);
    color: var(--heading-color);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--step--4);
    opacity: 0.75;
}

.tt-filter-option {
    display: flex;
    align-items: center;
    gap: var(--step--4);
    padding: var(--step--4) 0;
    cursor: pointer;
}

.tt-filter-option input {
    /*margin: 0;*/
}

.tt-filter-actions {
    display: flex;
    justify-content: space-between;
    margin-top: var(--step--2);
}

.tt-form .tt-input-group .tt-filter-actions .tt-btn,
.tt-filter-actions .tt-btn {
    flex: initial;
    border-radius: var(--button-radius-sm);
    border-color: transparent;
    height: auto;
    min-height: 0;
    padding: var(--button-padding-sm);
    font-size: var(--button-font-size-sm);
    margin: var(--button-margin-sm);
}