/* Tabs of the new/edit/detail pages (the ea:Tabs component).
   Visual design based on GitHub Primer's UnderlineNav component:
   https://primer.style/product/components/underline-nav/ */

.form-tabs-tablist {
    box-shadow: inset 0 calc(-1 * var(--border-width)) 0 var(--form-tabs-border-color);
    display: flex;
    margin-block-end: var(--ea-sp-10);
    overflow-inline: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
}
.form-tabs-tablist::-webkit-scrollbar {
    display: none;
}

.form-tabs-tablist .nav-tabs {
    background: transparent;
    /* the 1px line is drawn by the wrapper, not by Bootstrap's .nav-tabs border */
    border: 0;
    flex-wrap: nowrap;
    gap: var(--ea-sp-6);
    margin: 0;
    /* the tabs (and their hover chip) don't touch the bottom line; the indicator of the selected tab bridges this gap (see ::after below) */
    padding: 0 0 var(--ea-sp-4);
    white-space: nowrap;
}

/* blockifies the <a> so its bottom edge (and the indicator) lands exactly on the wrapper line */
.form-tabs-tablist .nav-tabs .nav-item {
    display: flex;
}

.form-tabs-tablist .nav-tabs .nav-link {
    align-items: center;
    background-color: transparent;
    /* resets Bootstrap's transparent border, top-only radius and negative bottom margin */
    border: 0;
    border-radius: var(--border-radius-lg);
    color: var(--text-color);
    display: flex;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    margin: 0;
    padding: var(--ea-sp-3) var(--ea-sp-4);
    position: relative;
    text-decoration: none;
    transition: background-color var(--ea-duration-fast) var(--ea-ease-out);
}

.form-tabs-tablist .nav-tabs .nav-link:hover {
    background-color: var(--form-tabs-item-hover-bg);
    border-color: transparent;
    color: var(--text-color);
}

.form-tabs-tablist .nav-tabs .nav-link:focus-visible {
    box-shadow: none;
    outline: var(--ea-focus-ring-width) solid var(--ea-primary-ring);
    /* the ring is drawn inside the tab so the scroll container of the tab bar doesn't clip it */
    outline-offset: calc(-1 * var(--ea-focus-ring-width));
}

/* the selected tab only changes its font weight (never its color) */
.form-tabs-tablist .nav-tabs .nav-link.active {
    background-color: transparent;
    color: var(--text-color);
    font-weight: var(--font-weight-semibold);
}
/* every tab owns a (collapsed) indicator, so that selecting a tab can animate it */
.form-tabs-tablist .nav-tabs .nav-link::after {
    background-color: var(--form-tabs-indicator-color);
    block-size: var(--form-tabs-indicator-size);
    border-radius: var(--border-radius-sm);
    content: "";
    /* pushed down across the bottom padding of the tab list, so it lands on the 1px line */
    inset-block-end: calc(-1 * var(--ea-sp-4));
    inset-inline: 0;
    position: absolute;
    scale: 0 1;
    transition: scale var(--ea-duration-fast) var(--ea-ease-out);
}
.form-tabs-tablist .nav-tabs .nav-link.active::after {
    scale: 1;
}
.form-tabs-tablist .nav-tabs .nav-link.active:hover {
    background-color: var(--form-tabs-item-hover-bg);
}

/* In browsers with CSS anchor positioning, the per-tab indicators become a single indicator per tab list
   that slides to the selected tab. Each tab gets its own enumerated anchor name because
   transitions only run when the anchor() argument changes; a single anchor-name moving between
   tabs wouldn't animate (it's a used-value change) and even sticks in some Chrome versions.
   Tabs after the 10th (very rare) keep the non-sliding per-tab indicator.
   The test targets 'anchor-scope' because scoping keeps multiple tab lists on the same page
   from anchoring to each other's tabs. */
/* biome-ignore lint/correctness/noUnknownProperty: Biome doesn't know 'anchor-scope' yet */
@supports (anchor-scope: --ea-tabs) {
    .form-tabs-tablist {
        /* biome-ignore lint/correctness/noUnknownProperty: Biome doesn't know 'anchor-scope' yet */
        anchor-scope: --ea-tab-1, --ea-tab-2, --ea-tab-3, --ea-tab-4, --ea-tab-5, --ea-tab-6, --ea-tab-7, --ea-tab-8,
            --ea-tab-9, --ea-tab-10;
        position: relative;
    }
    .form-tabs-tablist .nav-tabs .nav-item:nth-child(-n + 10) > .nav-link::after {
        content: none;
    }
    /* the ':has()' guard removes the indicator when no anchored tab is selected, because
       anchor() wouldn't resolve and the indicator would render mispositioned */
    .form-tabs-tablist .nav-tabs:has(.nav-item:nth-child(-n + 10) > .nav-link.active)::after {
        background-color: var(--form-tabs-indicator-color);
        block-size: var(--form-tabs-indicator-size);
        border-radius: var(--border-radius-sm);
        content: "";
        inset-block-end: 0;
        position: absolute;
        transition: inset-inline-start var(--ea-duration-slow) var(--ea-ease-out), inline-size var(--ea-duration-slow)
            var(--ea-ease-out);
    }

    .form-tabs-tablist .nav-tabs .nav-item:nth-child(1) > .nav-link {
        anchor-name: --ea-tab-1;
    }
    .form-tabs-tablist .nav-tabs .nav-item:nth-child(2) > .nav-link {
        anchor-name: --ea-tab-2;
    }
    .form-tabs-tablist .nav-tabs .nav-item:nth-child(3) > .nav-link {
        anchor-name: --ea-tab-3;
    }
    .form-tabs-tablist .nav-tabs .nav-item:nth-child(4) > .nav-link {
        anchor-name: --ea-tab-4;
    }
    .form-tabs-tablist .nav-tabs .nav-item:nth-child(5) > .nav-link {
        anchor-name: --ea-tab-5;
    }
    .form-tabs-tablist .nav-tabs .nav-item:nth-child(6) > .nav-link {
        anchor-name: --ea-tab-6;
    }
    .form-tabs-tablist .nav-tabs .nav-item:nth-child(7) > .nav-link {
        anchor-name: --ea-tab-7;
    }
    .form-tabs-tablist .nav-tabs .nav-item:nth-child(8) > .nav-link {
        anchor-name: --ea-tab-8;
    }
    .form-tabs-tablist .nav-tabs .nav-item:nth-child(9) > .nav-link {
        anchor-name: --ea-tab-9;
    }
    .form-tabs-tablist .nav-tabs .nav-item:nth-child(10) > .nav-link {
        anchor-name: --ea-tab-10;
    }

    .form-tabs-tablist .nav-tabs:has(.nav-item:nth-child(1) > .nav-link.active)::after {
        inset-inline-start: anchor(--ea-tab-1 start);
        inline-size: anchor-size(--ea-tab-1 inline);
    }
    .form-tabs-tablist .nav-tabs:has(.nav-item:nth-child(2) > .nav-link.active)::after {
        inset-inline-start: anchor(--ea-tab-2 start);
        inline-size: anchor-size(--ea-tab-2 inline);
    }
    .form-tabs-tablist .nav-tabs:has(.nav-item:nth-child(3) > .nav-link.active)::after {
        inset-inline-start: anchor(--ea-tab-3 start);
        inline-size: anchor-size(--ea-tab-3 inline);
    }
    .form-tabs-tablist .nav-tabs:has(.nav-item:nth-child(4) > .nav-link.active)::after {
        inset-inline-start: anchor(--ea-tab-4 start);
        inline-size: anchor-size(--ea-tab-4 inline);
    }
    .form-tabs-tablist .nav-tabs:has(.nav-item:nth-child(5) > .nav-link.active)::after {
        inset-inline-start: anchor(--ea-tab-5 start);
        inline-size: anchor-size(--ea-tab-5 inline);
    }
    .form-tabs-tablist .nav-tabs:has(.nav-item:nth-child(6) > .nav-link.active)::after {
        inset-inline-start: anchor(--ea-tab-6 start);
        inline-size: anchor-size(--ea-tab-6 inline);
    }
    .form-tabs-tablist .nav-tabs:has(.nav-item:nth-child(7) > .nav-link.active)::after {
        inset-inline-start: anchor(--ea-tab-7 start);
        inline-size: anchor-size(--ea-tab-7 inline);
    }
    .form-tabs-tablist .nav-tabs:has(.nav-item:nth-child(8) > .nav-link.active)::after {
        inset-inline-start: anchor(--ea-tab-8 start);
        inline-size: anchor-size(--ea-tab-8 inline);
    }
    .form-tabs-tablist .nav-tabs:has(.nav-item:nth-child(9) > .nav-link.active)::after {
        inset-inline-start: anchor(--ea-tab-9 start);
        inline-size: anchor-size(--ea-tab-9 inline);
    }
    .form-tabs-tablist .nav-tabs:has(.nav-item:nth-child(10) > .nav-link.active)::after {
        inset-inline-start: anchor(--ea-tab-10 start);
        inline-size: anchor-size(--ea-tab-10 inline);
    }
}

@media (prefers-reduced-motion: reduce) {
    .form-tabs-tablist .nav-tabs .nav-link::after,
    .form-tabs-tablist .nav-tabs::after {
        transition: none;
    }
}

/* the label is as wide as its semibold version (see ::before below), so the regular
   text is centered to split the extra width evenly between both sides */
.form-tabs-tablist .nav-tabs .tab-nav-item-label {
    margin-inline-start: -4px;
    text-align: center;
}
/* reserves the width of the semibold label, so tabs don't shift when the selection changes */
.form-tabs-tablist .nav-tabs .tab-nav-item-label::before {
    block-size: 0;
    content: attr(data-content);
    display: block;
    font-weight: var(--font-weight-semibold);
    overflow: hidden;
    visibility: hidden;
}

.form-tabs-tablist .nav-tabs .tab-nav-item-icon {
    color: var(--text-muted);
    margin-inline-end: var(--ea-sp-4);
}

/* scoped to '.nav-item .badge' (not to a component class) so the error badge built by form.js looks identical to the server-rendered ones */
.form-tabs-tablist .nav-tabs .nav-item .badge {
    border-radius: var(--border-radius-full);
    line-height: var(--line-height-none);
    margin-inline-start: var(--ea-sp-4);
    padding: var(--ea-sp-2) var(--ea-sp-3);
}

.form-tabs-content .tab-help {
    color: var(--form-tabs-help-color);
    margin-block-start: calc(-1 * var(--ea-sp-4));
    margin-block-end: var(--ea-sp-8);
}