/**
 * UX2 pill tabs (LXP-2579): a row of tabs where the picked one sits on a light brand pill, and a paler pill glides to
 * the tab under the pointer (or keyboard focus) and back. appjs/common/ux2/pillTabs.js adds the gliding pill to every
 * .ux2-pilltabs, also ones drawn later; without it the picked tab simply has the pill. Pages keep their tabs' own
 * text colours, sizes and counts; this only adds the pill shape and the glide.
 *   <div class="ux2-pilltabs" role="tablist"> <button role="tab" aria-selected="true">…</button> … </div>
 * The picked tab: aria-selected="true", aria-current="page" or .active.
 */
.ux2-pilltabs {
    position: relative;
}

.ux2-pilltabs > :not(.ux2-pilltabs-pill) {
    position: relative;
    z-index: 1;
    border-radius: 999px;
}

/* Without the script (or before it runs): the pill on the picked tab itself */
.ux2-pilltabs > [aria-selected="true"],
.ux2-pilltabs > [aria-current="page"],
.ux2-pilltabs > .active {
    background: color-mix(in srgb, var(--sko-primary, #1e5f69) 11%, #fff);
}

.ux2-pilltabs.has-pill > :not(.ux2-pilltabs-pill) {
    background: none !important;
}

.ux2-pilltabs-pill {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
    background: color-mix(in srgb, var(--sko-primary, #1e5f69) 6%, #fff);
    border-radius: 999px;
    opacity: 0;
    transition: opacity .15s ease, background-color .2s ease;
}

.ux2-pilltabs-pill.is-home {
    background: color-mix(in srgb, var(--sko-primary, #1e5f69) 11%, #fff);
}

.ux2-pilltabs-pill.is-moving {
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), width .3s cubic-bezier(.2, .8, .2, 1),
        height .3s cubic-bezier(.2, .8, .2, 1), opacity .15s ease, background-color .2s ease;
}