/*
 * Tabs (WP9; UI-Design-Principles Sec. 6). URL-bound; active tab is underlined in
 * Ember. Class schema: gtx-tabs, gtx-tabs__tab, gtx-tabs__tab.is-active.
 */

.gtx-tabs {
    display: flex;
    gap: var(--gtx-s4);
    border-bottom: 1px solid var(--gtx-line);
    overflow-x: auto;
}

.gtx-tabs__tab {
    position: relative;
    padding: var(--gtx-s3) 2px;
    color: var(--gtx-text-dim);
    font-size: var(--gtx-fs-ui);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.gtx-tabs__tab:hover {
    color: var(--gtx-text);
    text-decoration: none;
}

.gtx-tabs__tab.is-active {
    color: var(--gtx-text);
    border-bottom-color: var(--gtx-ember);
}