/* The shared top band has no dependency on chips or their placement. */
.tab-bar-position {
	position: fixed;
	inset: 0;
	/* DroidDash's tab height, kept as the page's top band. */
	padding-top: 96px;
	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	pointer-events: none;
}
/* A viewport-sized positioning layer leaves chips independent of page content.
 * Its children alone receive input. Hosted bars use the same content layer. */
.tab-bar-position, .tab-bar { z-index: 20; }
.tab-bar {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-2);
	box-sizing: border-box;
	width: max-content;
	max-width: calc(100% - var(--s-8));
	pointer-events: none;
}
.tab-bar[data-hosted="true"] { max-width: 100%; }
.tab-bar[data-hosted="true"] .tab-bar-tabs { justify-content: center; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
body[data-kit-page-room] .tab-bar[data-hosted="true"] .tab-bar-tabs {
	min-width: 0;
	max-width: 100%;
}
body[data-kit-page-room] .tab-bar[data-hosted="true"] .tab-bar-tab {
	box-sizing: border-box;
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
}
.tab-bar-position[data-placement="side"] {
	justify-content: flex-start;
	padding-left: var(--s-2);
}
.tab-bar[data-placement="side"] {
	max-width: calc(100% - var(--s-8));
	flex-direction: column;
	align-items: flex-start;
}
@media (max-width: 700px) {
	.tab-bar-position { padding-top: 76px; }
}
.tab-bar-tabs {
	display: flex;
	align-items: baseline;
	justify-self: center;
	gap: var(--s-1);
}
.tab-bar[data-placement="side"] .tab-bar-tabs { flex-direction: column; gap: var(--s-2); }
.tab-bar[data-hosted="false"] .tab-bar-tab { padding-block: var(--s-2); }
[data-tab-bar-panel][data-tab-bar-keep-space][data-tab-bar-hidden="true"] { visibility: hidden; pointer-events: none; }
[data-tab-bar-panel][hidden] { display: none !important; }
.tab-bar-position[hidden], .tab-bar[hidden], .tab-bar [hidden] { display: none; }
.tab-bar > *, .tab-bar-tab { pointer-events: auto; }
.tab-bar-tab, .tab-bar-tool {
	font-family: var(--page-controls-font, var(--font-mono));
	font-size: calc(13px * var(--page-controls-scale, 1));
	background: none;
	border: var(--b-hair) solid transparent;
	border-radius: var(--r-pill);
	padding: var(--s-1) var(--s-4);
	color: var(--muted);
	cursor: pointer;
	transition: background var(--dur-hover) var(--ease);
}
.tab-bar-tab {
	font-family: var(--page-controls-font, var(--font-sans));
	font-size: calc(16px * var(--page-controls-scale, 1));
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
}
.tab-bar-tab:hover, .tab-bar-tool:hover { background: var(--panel); color: var(--fg); }
.tab-bar-tab[aria-current] { background: var(--panel-alt); border-color: var(--border); color: var(--fg); }
.tab-bar-tab[data-dragging="true"] { position: relative; z-index: 2; border-color: var(--accent); color: var(--fg); }
.tab-bar-tool { padding-inline: var(--s-3); }
.tab-bar-input {
	font-family: var(--page-controls-font, var(--font-mono));
	font-size: calc(13px * var(--page-controls-scale, 1));
	background: var(--panel);
	border: var(--b-hair) solid var(--accent);
	border-radius: var(--r-pill);
	padding: var(--s-1) var(--s-4);
	color: var(--fg);
	width: 9em;
}
.tab-bar-input:focus { outline: none; }

/* Bars inside document blocks stay in their host's flow and stacking context. */
.tab-bar[data-scope="block"] { z-index: auto; width: 100%; max-width: 100%; justify-content: flex-start; }
.tab-bar[data-scope="block"] .tab-bar-tabs { min-width: 0; max-width: 100%; justify-content: flex-start; flex-wrap: wrap; }
.tab-bar[data-scope="block"] .tab-bar-tab { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.tab-bar[data-scope="block"] .tab-bar-tool { pointer-events: auto; }
.tab-bar[data-scope="block"] .tab-bar-tab:focus-visible { outline: var(--b-hair) solid var(--accent); outline-offset: var(--s-1); }