/* Summary shown under the title of a collapsed SemaforFieldset.
   Radzen renders the summary in a second content wrapper right after the normal content wrapper. */

.s-fieldset-header-alert {
    vertical-align: middle;
}

/* The app stretches fieldset content to full height. The summary must not stretch,
   otherwise the collapsed section grows and pushes the sections below out of the screen. */
.rz-fieldset-content-wrapper + .rz-fieldset-content-wrapper {
    height: auto;
}

.rz-fieldset-content.rz-fieldset-content-summary {
    height: auto;
    padding: 0;
}

/* Left padding aligns the chips with the section title (legend margin + padding + toggle button). */
.s-fieldset-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    padding: 0 0.5rem 0.25rem calc(2.5rem + var(--rz-fieldset-toggle-width));
    max-width: 60rem;
    color: #6b7280;
    font-size: 0.82rem;
    line-height: 1.25;
}

.s-fieldset-summary-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    box-sizing: border-box;
    margin: 0;
    max-width: 100%;
    padding: 0.22em 0.7em;
    border: none;
    border-radius: 999px;
    background: #f1f3f5;
    color: #495057;
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
    cursor: text;
    user-select: text;
}

/* A long e-mail must not widen the form on a phone. The full text stays in the tooltip. */
.s-fieldset-summary-chip-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.s-fieldset-summary-chip > .material-icons.s-fieldset-summary-chip-icon {
    flex-shrink: 0;
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 14px;
    user-select: none;
}

.s-fieldset-summary-chip-empty {
    font-style: italic;
    opacity: 0.85;
}

.s-fieldset-summary-chip-ok {
    color: #1a7f4b;
}