Modul:WearableSet/Variants/styles.css

.t-wearable_set-variants-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, 120px);
    gap: var(--space-xs);
    margin: 0;
    padding: 0;
}

.t-wearable_set-variants-summary-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
    margin: 0;
    padding: var(--space-xxs) var(--space-xs);
    border: var(--border-base);
    border-radius: var(--border-radius-medium);
    max-width: 100px;
}

.t-wearable_set-variants-summary-label {
    display: flex;
    align-items: center;
    gap: var(--space-xxs);
    margin: 0;
    color: inherit;
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    font-weight: var(--font-weight-medium);
}

/*
 * Decorative category glyph rendered before the label text. Emoji
 * for now — when first-party icons exist we can swap to mask-image
 * the same way the value cell does. `aria-hidden` on the span keeps
 * screen readers from double-announcing it alongside the label.
 */
.t-wearable_set-variants-summary-icon {
    flex-shrink: 0;
    font-size: var(--font-size-medium);
    line-height: 1;
}

/*
 * The value cell is purely visual — its yes/no/unknown text lives in
 * a visually-hidden `<span>` child (see `-value-text` below). The icon
 * is a mask-image filled by `background-color: currentColor`, with the
 * state-specific color set on the parent item so the same value
 * element recolors automatically through CSS inheritance.
 *
 * Codex icons (CdxIconSuccess / CdxIconClear / CdxIconHelpNotice) are
 * uploaded as SVG files on the wiki; the `/Special:FilePath/…` redirect
 * resolves to the CDN. `-webkit-mask-image` was tried first but
 * TemplateStyles rejects the prefixed property; modern Safari (15.4+)
 * supports the unprefixed form so the prefix is unnecessary anyway.
 */
.t-wearable_set-variants-summary-value {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 0;
    background-color: currentColor;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

/*
 * State modifiers on the item. Color cascades to the value via
 * `currentColor` (the label has its own explicit color so it stays
 * neutral); the mask-image is set on the descendant value element so
 * the right Codex icon is picked up by the same selector.
 */
.t-wearable_set-variants-summary-item--yes {
    color: var(--color-success);
    background-color: var(--background-color-success-subtle);
    border-color: var(--border-color-success);
}

.t-wearable_set-variants-summary-item--yes .t-wearable_set-variants-summary-value {
    mask-image: url(/Special:FilePath/CdxIconSuccess.svg);
}

.t-wearable_set-variants-summary-item--no {
    color: var(--color-disabled);
    border-color: var(--border-color-disabled);
}

.t-wearable_set-variants-summary-item--no .t-wearable_set-variants-summary-value {
    mask-image: url(/Special:FilePath/CdxIconClear.svg);
}

.t-wearable_set-variants-summary-item--unknown {
    color: var(--color-warning);
    background-color: var(--background-color-warning-subtle);
    border-color: var(--border-color-warning);
}

.t-wearable_set-variants-summary-item--unknown .t-wearable_set-variants-summary-value {
    mask-image: url(/Special:FilePath/CdxIconHelpNotice.svg);
}

/*
 * Visually-hidden text that carries the accessible name of the value
 * cell. Sighted users see only the mask-image icon; screen readers,
 * translation tools, and reader modes pick up the text. Standard
 * "clip" pattern: position absolute so the element is removed from
 * flow, then collapsed to a 1×1 box and clipped to nothing.
 */
.t-wearable_set-variants-summary-value-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.t-wearable_set-variants-card .t-card__title {
    width: 100%
}

.t-wearable_set-variants-title_section {
    display: flex;
    gap: var(--space-sm);
}

.t-wearable_set-variants-title_section__container {
    width: 100%;
    min-height: 100px;
    position: relative;
}

.t-wearable_set-variants-title_section__title {
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-semi-bold);
    color: var(--color-emphasized);
}

.t-wearable_set-variants-title_section__description {
    color: var(--color-subtle);
}

.t-wearable_set-variants-title_section__summary {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.t-wearable_set-variants-content_section__note {
    margin: var(--space-xs);
    font-size: var(--font-size-small);
    font-style: italic;
}

.t-wearable_set-variants-content_section__note:empty {
    margin: 0;
}

.t-wearable_set-variants-content_section__components tr:first-of-type {
    display: none;
}

.t-wearable_set-variants-content_section__components tr {
    border-top: 0 !important;
}

.t-wearable_set-variants-content_section__components .citizen-overflow-wrapper {
    margin: 0 !important;
}