/* Scope chip, colour swatch and the mono version and state labels. */

.swatch {
    display: inline-block;
    flex: none;
    width: var(--swatch);
    height: var(--swatch);
    background-color: var(--accent);
    border-radius: var(--r-1);
}

.scope-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-1) var(--s-3);
    color: var(--paper-hi);
    list-style: none;
    cursor: pointer;
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-1);
}

.scope-chip::-webkit-details-marker {
    display: none;
}

.scope-chip:hover,
.menu[open] > .scope-chip {
    background-color: var(--ink-3);
}

.scope-chip__name {
    font: 700 var(--t-md) / var(--lh-sm) var(--font-display);
    text-transform: uppercase;
    letter-spacing: .05em;
}

@media (max-width: 899.98px), (pointer: coarse) {
    .scope-chip {
        min-height: var(--hit);
    }
}