/* Tabs block. Loaded only where the block is used. Values the Style controls set have their defaults
 * under :where() (zero specificity), so the generated CSS always wins. */
.wb-tabs { display: flex; flex-direction: column; }
.wb-tabs .wb-tabs__nav { display: flex; flex-wrap: wrap; }
.wb-tabs .wb-tabs__tab {
	display: inline-flex; align-items: center; justify-content: center; text-align: center; cursor: pointer;
	transition: background-color .25s, border-color .25s, color .25s;
}
/* Border, font and line height are Style controls too: under :where() so the generated CSS wins
   (this file loads after it; at equal specificity it used to drop the inactive tabs' border). */
:where(.wb-tabs .wb-tabs__tab) { margin: 0; border: 0 solid transparent; font: inherit; line-height: 1.2; }
.wb-tabs .wb-tabs__tab:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.wb-tabs .wb-tabs__image { display: block; height: auto; max-width: 100%; }
.wb-tabs .wb-tabs__panel[hidden] { display: none; }
.wb-tabs .wb-tabs__panel:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
:where(.wb-tabs) { gap: 24px; }
:where(.wb-tabs .wb-tabs__nav) { gap: 8px; }
:where(.wb-tabs .wb-tabs__tab) { padding: 12px 20px; background: #f2f4f7; color: inherit; }
:where(.wb-tabs .wb-tabs__tab[aria-selected="true"]) { background: #fff; }
:where(.wb-tabs .wb-tabs__image) { width: 120px; }

/* Nav on the left */
.wb-tabs--nav-left { flex-direction: row; align-items: flex-start; }
.wb-tabs--nav-left .wb-tabs__nav { flex-direction: column; flex-wrap: nowrap; flex-shrink: 0; }
.wb-tabs--nav-left .wb-tabs__panels { flex: 1 1 auto; min-width: 0; }

/* Phones: one swipeable row (Scroll Nav on Mobile) / nav back on top */
@media (max-width: 767px) {
	.wb-tabs--nav-left { flex-direction: column; }
	.wb-tabs--nav-left .wb-tabs__nav { flex-direction: row; }
	.wb-tabs--scroll-yes .wb-tabs__nav { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	.wb-tabs--scroll-yes .wb-tabs__nav::-webkit-scrollbar { display: none; }
	.wb-tabs--scroll-yes .wb-tabs__tab { flex: 0 0 auto; scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { .wb-tabs .wb-tabs__tab { transition: none; } }