/*
 * Tabs.
 *
 * A section is a group of pages the owner moves between while doing one thing; the tabs are how
 * those pages are reached. The same strip serves a section of the project and a section of one
 * object alike.
 *
 * A tab is a link to a real route, not a piece of script state: the owner can bookmark a group
 * and come back to it.
 */

.app-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    border-bottom: 1px solid var(--border);
}

.app-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--inset-row) var(--space-3);
    /* The active tab is marked by a line that continues the border below the strip, so the
       strip reads as one object rather than as a row of buttons. */
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: var(--text-3);
    transition: color var(--transition), border-color var(--transition);
}

.app-tab:hover {
    color: var(--text);
    text-decoration: none;
}

.app-tab[aria-current='page'] {
    border-bottom-color: var(--accent);
    color: var(--accent);
    font-weight: var(--fw-semibold);
}

/* An unread notification marks the tab as well as the menu item, and both sit the same way:
   beside the word, one small step away. */
.app-tab__alert {
    margin-left: var(--space-1);
    color: var(--negative);
    font-weight: var(--fw-bold);
}

@media (pointer: coarse) {
    .app-tab {
        min-height: var(--control-touch);
    }
}