/* A segmented control: a row of options of which one is chosen, such as
   a period, a scope or a view. Separate tiles like the main navigation; the
   accent colour stays with the navigation, so the chosen option is lifted
   by its fill and border instead.
   Pages add their own layout (width, scrolling) on top. */
.segmented {
    display: flex;
    gap: .35rem;
}

.segmented__option {
    flex: 1 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 .75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: none;
    color: var(--text-muted);
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.segmented__option:hover {
    color: var(--text);
}

.segmented__option:is(.is-active, [aria-pressed="true"], [aria-current="page"]) {
    background: var(--surface-2);
    border-color: var(--border-chosen);
    color: var(--text);
}