/*
 * utabs - one tabs / switcher component for the whole site.
 *
 * markup:
 *   <div class="utabs utabs--tab" data-utabs>
 *     <div class="utabs-scroll">
 *       <div class="utabs-track" role="tablist">
 *         <i class="utabs-pill"></i>
 *         <button type="button" class="utabs-tab is-active" role="tab" data-value="x" data-text="Name"><span>Name</span></button>
 *         ...
 *
 * skins (look only, mechanics are the same):
 *   utabs--tab   tabs of content blocks: side padding 20, active = orange 10% fill + orange border
 *   utabs--chip  filter chips: side padding 15, active = white + orange border
 *
 * how it is painted: every tab draws its own white body in ::before, ONE shared marker (.utabs-pill)
 * slides above those bodies and under the text. so the switch looks like a single control (iOS style),
 * not like two tabs that blink. do not put transform / z-index on .utabs-tab itself - it would make
 * a stacking context and the marker would cover the text.
 */
.utabs{--ut-h:40px;--ut-pad:20px;--ut-gap:5px;--ut-radius:100px;--ut-line:#DFDFDF;--ut-accent:#EC7529;--ut-text:#212121;--ut-off:#B5B5B5;--ut-body:#fff;--ut-fill:rgba(236,117,41,.1);--ut-time:.26s;--ut-ease:cubic-bezier(.45,0,.15,1);
	display:flex;justify-content:center;min-width:0;max-width:100%}
.utabs--chip{--ut-pad:15px;--ut-fill:transparent}

/* max-width is 100% + 8px: the box is 4px bigger on every side (room for the focus ring) and is pulled back
   by the negative margin. with plain 100% a row that overflows was shifted 4px to the right */
.utabs-scroll{min-width:0;max-width:calc(100% + 8px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;
	/* room for the focus ring, it is drawn outside of a tab */
	padding:4px;margin:-4px}
.utabs-scroll::-webkit-scrollbar{display:none}
/* the row does not fit: side room for the focus ring is dropped (edges are faded by the mask anyway).
   with this room a row that is as wide as the screen made the whole page scroll sideways by some px */
.utabs.is-over .utabs-scroll{max-width:100%;padding-left:0;padding-right:0;margin-left:0;margin-right:0}
/* soft edge on the side where more tabs are hidden */
.utabs.can-right .utabs-scroll{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
.utabs.can-left .utabs-scroll{-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px);mask-image:linear-gradient(90deg,transparent,#000 56px)}
.utabs.can-left.can-right .utabs-scroll{-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent)}
.utabs.is-drag .utabs-scroll{cursor:grabbing}

.utabs-track{position:relative;display:flex;gap:var(--ut-gap);width:max-content;margin:0;padding:0;list-style:none}

/* ---- a tab ---- */
.utabs-tab{position:relative;flex:0 0 auto;height:var(--ut-h);padding:0 var(--ut-pad);margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;
	border:0;border-radius:var(--ut-radius);background:transparent;color:var(--ut-text);font-family:inherit;font-size:14px;line-height:1.5;font-weight:400;text-align:center;white-space:nowrap;
	cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none;-webkit-user-select:none;user-select:none}
/* body of the tab: white + thin border */
.utabs-tab::before{content:"";position:absolute;inset:0;box-sizing:border-box;border:1px solid var(--ut-line);border-radius:inherit;background:var(--ut-body);z-index:0;transition:border-color .18s ease,transform .12s ease}
.utabs-tab > span{position:relative;z-index:2;display:block;transition:transform .12s ease,color .18s ease}
/* bold text is wider: the place for it is kept from the start, so the row never moves on switch */
.utabs-tab::after{content:attr(data-text);display:block;height:0;overflow:hidden;visibility:hidden;font-weight:700;pointer-events:none}

/* ---- the sliding marker ---- */
.utabs-pill{position:absolute;left:0;top:0;width:0;height:var(--ut-h);box-sizing:border-box;border:1px solid var(--ut-accent);border-radius:var(--ut-radius);background:var(--ut-fill);pointer-events:none;z-index:1;opacity:0;
	transition:transform var(--ut-time) var(--ut-ease),width var(--ut-time) var(--ut-ease),opacity .15s ease}
.utabs-pill.is-on{opacity:1}
.utabs-pill.no-anim{transition:none}

/* ---- states ---- */
.utabs-tab.is-active{font-weight:700;cursor:default}
@media (hover:hover){
	.utabs-tab:not(.is-active):not(.is-disabled):hover::before{border-color:var(--ut-accent)}
}
/* press: soft squeeze like an iOS control (on inner parts, see the note at the top) */
.utabs-tab:not(.is-active):not(.is-disabled):active::before,
.utabs-tab:not(.is-active):not(.is-disabled):active > span{transform:scale(.96)}
/* keyboard focus only, a mouse click does not draw the ring */
.utabs-tab:focus-visible{outline:2px solid var(--ut-accent);outline-offset:2px}
/* not available for now */
.utabs-tab.is-disabled,.utabs-tab[disabled]{color:var(--ut-off);cursor:not-allowed}
.utabs-tab.is-disabled::before,.utabs-tab[disabled]::before{background:#FAFAFA}
/* content of the picked tab is loading: the tab is active at once, the marker breathes */
.utabs.is-loading .utabs-pill{animation:utabsBreath 1s ease-in-out infinite}
@keyframes utabsBreath{0%,100%{opacity:1}50%{opacity:.45}}

@media (max-width:768px){
	.utabs{--ut-h:36px;--ut-pad:16px;justify-content:flex-start}
	/* on a phone the row usually goes from edge to edge of the screen: side room for the focus ring would make
	   the page scroll sideways. blocks give the track its own side padding there instead */
	.utabs-scroll{max-width:100%;padding-left:0;padding-right:0;margin-left:0;margin-right:0}
	.utabs--chip{--ut-pad:13px}
	.utabs-tab{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
	.utabs-pill,.utabs-tab::before,.utabs-tab > span{transition:none}
	.utabs.is-loading .utabs-pill{animation:none}
}