/*
 * The exact types of a sale's sats (sale-types.js): a capsule and a short
 * name after the sat in a collection's Activity, the other combinations of
 * a pair or a bundle in the secondary chip's dashed "+" (badges.css
 * .sale-with); and the row's sales by kind, folded to one quiet line.
 */

.stypes {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin-left: 6px;
    vertical-align: middle;
}

.stypes-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.stypes-label {
    color: var(--ink-2);
    font-size: 12px;
}

/* A pair or a bundle: its combinations on a line of their own under the
   sat, the others' chip wrapping inside the cell (cells never wrap). */
.stypes--many {
    display: flex;
    margin: 3px 0 0;
    white-space: normal;
}

.stypes .stypes-with {
    flex-wrap: wrap;
    gap: 2px 6px;
    max-width: 100%;
    margin-left: 0;
    border-radius: 12px;
    white-space: normal;
}

.stypes-with .stypes-label {
    font-size: inherit;
}

/* ------------------------------------------- the row's sales by kind */

.stypes-break {
    margin: 2px 16px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 12.5px;
}

.stypes-summary {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    padding: 6px 10px;
    color: var(--ink-2);
    cursor: pointer;
    list-style: none;
}

.stypes-summary::-webkit-details-marker {
    display: none;
}

.stypes-summary::before {
    content: "\25B8";
    flex: none;
    color: var(--ink-2);
}

.stypes-break[open] > .stypes-summary::before {
    content: "\25BE";
}

.stypes-summary:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: -2px;
    border-radius: 8px;
}

.stypes-title {
    flex: none;
    color: var(--ink);
    font-weight: 600;
}

.stypes-peek {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.stypes-break[open] .stypes-peek {
    display: none;
}

.stypes-note,
.stypes-other {
    margin: 0;
    padding: 0 10px 6px;
    color: var(--ink-2);
    font-size: 12px;
}

.stypes-list {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0 6px 6px;
    list-style: none;
}

.stypes-kind {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto 7.5em;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 28px;
    padding: 2px 6px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: none;
    color: var(--ink);
    font: inherit;
    text-align: left;
}

.stypes-kind--pick {
    cursor: pointer;
}

.stypes-kind--pick:hover {
    background: var(--hover);
}

.stypes-kind--pick:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 1px;
}

.stypes-kind--pick[aria-pressed="true"] {
    border-color: var(--series-1);
    background: var(--wash);
    font-weight: 600;
}

.stypes-badges {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.stypes-plus {
    color: var(--ink-2);
    font-weight: 600;
}

.stypes-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.stypes-count,
.stypes-median {
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

/* The phone: the counts under the name. */
@media (max-width: 640px) {
    .stypes-break {
        margin: 2px 12px 8px;
    }

    .stypes-kind {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "badges name name"
            "badges count median";
        gap: 0 8px;
        padding: 4px 6px;
    }

    .stypes-badges { grid-area: badges; }
    .stypes-name { grid-area: name; }
    .stypes-count { grid-area: count; text-align: left; }
    .stypes-median { grid-area: median; }
}

@media (forced-colors: active) {
    .stypes-kind--pick[aria-pressed="true"] {
        border-color: Highlight;
    }
}