/* Design system v2 — tabs (round 26, UIX-6; round 27 THM-4a; run 36a1 TAB-1).
   The colour of the one tab recipe (sizes in parts/sc-tabs.css), for the same selector list:
   strips .sc-tabs, .sc-np-tabs, .siteclick-ve-tabs, .siteclick-ve-viewtabs carry a hairline;
   tabs .sc-tab, .sc-np-tab, .siteclick-ve-tab, .siteclick-ve-viewtab use one scale:
   muted → hover strong → active strong + 2px primary indicator (.is-active; .active is the
   alias of the app and view tabs). No box, no radius, no fill; colour only, so a tab never
   changes size. The count after the label is plain primary text. */

.sc-tabs,
.sc-np-tabs,
.siteclick-ve-tabs,
.siteclick-ve-viewtabs {
    box-shadow: inset 0 -1px 0 var(--sc-color-hairline);
}

.sc-tabs .sc-tab,
.sc-np-tab,
.siteclick-ve-tab,
.siteclick-ve-viewtab {
    border-color: transparent;
    border-radius: 0;
    background: transparent;
    color: var(--sc-color-text-muted); /* subtle is 3.25:1 on the light ground, muted 6.3:1 (W6) */
    box-shadow: inset 0 -2px 0 transparent;
    transition: background-color var(--sc-dur-fast) var(--sc-ease-out),
                color var(--sc-dur-fast) var(--sc-ease-out),
                border-color var(--sc-dur-fast) var(--sc-ease-out),
                box-shadow var(--sc-dur-base) var(--sc-ease-out);
}
.sc-tabs .sc-tab:hover,
.sc-np-tab:hover,
.siteclick-ve-tab:hover,
.siteclick-ve-viewtab:hover {
    color: var(--sc-color-text-strong);
}
.sc-tabs .sc-tab.is-active,
.sc-tabs .sc-tab.active,
.sc-np-tab.is-active,
.siteclick-ve-tab.is-active,
.siteclick-ve-viewtab.is-active,
.siteclick-ve-viewtab.active {
    background: transparent;
    color: var(--sc-color-text-strong);
    box-shadow: inset 0 -2px 0 var(--sc-color-primary);
}
/* The strip clips overflow, so the focus ring sits inside the tab. */
.sc-tabs .sc-tab:focus-visible,
.sc-np-tab:focus-visible,
.siteclick-ve-tab:focus-visible,
.siteclick-ve-viewtab:focus-visible {
    outline: 2px solid var(--sc-color-primary);
    outline-offset: -2px;
}

.sc-tab-count {
    color: var(--sc-color-primary-text);
}