.bcom-atoolbar {
	--bcom-atb-ease: cubic-bezier(0.23, 1, 0.32, 1);
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--bcom-space-3) var(--bcom-space-4);
	padding-block: var(--bcom-space-3);
	border-block-end: 1px solid var(--bcom-line);
	font-family: var(--bcom-font);
}

.bcom-atoolbar__count {
	display: flex;
	align-items: center;
	min-height: var(--bcom-field-h, 48px);
	margin: 0 auto 0 0;
	color: var(--bcom-muted);
	font-size: var(--bcom-fs-sm);
	line-height: var(--bcom-lh-snug);
	font-variant-numeric: tabular-nums;
}

.bcom-atoolbar__filters {
	--bcom-btn-fs: var(--bcom-fs-sm);
	flex: none;
}

.bcom-atoolbar__filters svg {
	width: 18px;
	height: 18px;
	fill: none;
}

.bcom-atoolbar__field {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	margin: 0;
}

.bcom-atoolbar__label {
	display: block;
	margin: 0;
	color: var(--bcom-atb-label, var(--bcom-fg));
	font-size: 14px;
	font-weight: var(--bcom-fw-semibold);
	line-height: var(--bcom-lh-snug);
	white-space: nowrap;
}

.bcom-atoolbar__sort .bcom-atoolbar__select-wrap,
.bcom-atoolbar .bcom-atoolbar__sort .bcom-atoolbar__select {
	min-width: var(--bcom-atb-sort-w, 240px);
}

.bcom-atoolbar__per-page .bcom-atoolbar__select-wrap {
	align-self: flex-start;
}

.bcom-atoolbar .bcom-atoolbar__select-wrap .bcom-atoolbar__select--narrow {
	min-width: var(--bcom-atb-per-page-w, 76px);
}

.bcom-atoolbar__segmented {
	display: inline-flex;
	border: 1px solid var(--bcom-atb-view-border, var(--bcom-line-strong));
	background-color: var(--bcom-atb-view-bg, var(--bcom-bg-elevated));
}

.bcom-atoolbar .bcom-atoolbar__view-btn {
	box-sizing: border-box;
	display: inline-grid;
	place-items: center;
	width: calc(var(--bcom-field-h, 48px) - 2px);
	height: calc(var(--bcom-field-h, 48px) - 2px);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
	color: var(--bcom-atb-view-fg, var(--bcom-fg-soft));
	cursor: pointer;
	transition: background-color var(--bcom-dur-fast) var(--bcom-atb-ease), color var(--bcom-dur-fast) var(--bcom-atb-ease), transform var(--bcom-dur-fast) var(--bcom-atb-ease);
}

.bcom-atoolbar .bcom-atoolbar__view-btn + .bcom-atoolbar__view-btn {
	border-inline-start: 1px solid var(--bcom-atb-view-border, var(--bcom-line-strong));
}

.bcom-atoolbar .bcom-atoolbar__view-btn .bcom-icon {
	width: 20px;
	height: 20px;
	color: currentColor;
}

.bcom-atoolbar .bcom-atoolbar__view-btn[aria-pressed="true"] {
	background-color: var(--bcom-atb-view-active-bg, var(--bcom-fg));
	color: var(--bcom-atb-view-active-fg, var(--bcom-bg-elevated));
	cursor: default;
}

.bcom-atoolbar .bcom-atoolbar__view-btn:focus-visible {
	position: relative;
	z-index: 1;
	outline: 2px solid var(--bcom-fg);
	outline-offset: 2px;
	box-shadow: none;
}

.bcom-atoolbar .bcom-atoolbar__view-btn:active {
	transform: scale(0.97);
}

.bcom-atoolbar__select-wrap {
	position: relative;
	display: inline-flex;
	min-width: 0;
	color: var(--bcom-fg);
}

.bcom-atoolbar .bcom-atoolbar__select-wrap .bcom-atoolbar__select {
	box-sizing: border-box;
	width: auto;
	max-width: 100%;
	height: var(--bcom-field-h, 48px);
	min-height: var(--bcom-field-h, 48px);
	margin: 0;
	padding: 0 44px 0 16px;
	border: 1px solid var(--bcom-atb-select-border, var(--bcom-line-strong));
	border-radius: 0;
	background: var(--bcom-bg-elevated) var(--bcom-icon-chevron) right 14px center / 20px 20px no-repeat;
	box-shadow: none;
	color: var(--bcom-fg);
	font-family: var(--bcom-font);
	font-size: 16px;
	font-weight: var(--bcom-fw-regular);
	line-height: 1.4;
	outline: 2px solid transparent;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color var(--bcom-dur-fast) var(--bcom-atb-ease), box-shadow var(--bcom-dur-fast) var(--bcom-atb-ease);
}

.bcom-atoolbar .bcom-atoolbar__select-wrap .bcom-atoolbar__select:focus {
	border-color: var(--bcom-atb-select-focus, var(--bcom-fg));
	box-shadow: 0 0 0 0.5px var(--bcom-atb-select-focus, var(--bcom-fg));
	outline: 2px solid transparent;
}

@supports (appearance: base-select) {
	.bcom-atoolbar .bcom-atoolbar__select-wrap .bcom-atoolbar__select,
	.bcom-atoolbar .bcom-atoolbar__select-wrap .bcom-atoolbar__select::picker(select) {
		appearance: base-select;
	}

	.bcom-atoolbar .bcom-atoolbar__select-wrap .bcom-atoolbar__select {
		display: flex;
		align-items: center;
		gap: 12px;
		padding-inline-end: 14px;
		background-image: none;
	}

	.bcom-atoolbar .bcom-atoolbar__select-wrap .bcom-atoolbar__select::picker-icon {
		content: "";
		flex: none;
		width: 20px;
		height: 20px;
		margin-inline-start: auto;
		background: var(--bcom-icon-chevron) center / 20px no-repeat;
		transition: rotate var(--bcom-duration) var(--bcom-atb-ease);
	}

	.bcom-atoolbar .bcom-atoolbar__select-wrap .bcom-atoolbar__select:open::picker-icon {
		rotate: 180deg;
	}

	.bcom-atoolbar .bcom-atoolbar__select-wrap .bcom-atoolbar__select::picker(select) {
		box-sizing: border-box;
		max-height: min(360px, 60dvh);
		margin-block: 4px;
		padding: 6px 0;
		border: 1px solid var(--bcom-line);
		border-radius: 0;
		background: var(--bcom-bg-popover);
		box-shadow: var(--bcom-shadow-md);
		color: var(--bcom-fg);
		font-family: var(--bcom-font);
		font-size: 16px;
		font-weight: var(--bcom-fw-regular);
	}

	.bcom-atoolbar .bcom-atoolbar__select-wrap .bcom-atoolbar__select option {
		display: flex;
		align-items: center;
		gap: 10px;
		min-height: 44px;
		padding: 10px 14px;
		color: var(--bcom-fg);
		font: inherit;
		line-height: 1.4;
		outline: 2px solid transparent;
		cursor: pointer;
		transition: background-color var(--bcom-dur-fast) var(--bcom-atb-ease);
	}

	.bcom-atoolbar .bcom-atoolbar__select-wrap .bcom-atoolbar__select option:is(:hover, :focus-visible) {
		background-color: var(--bcom-surface);
	}

	.bcom-atoolbar .bcom-atoolbar__select-wrap .bcom-atoolbar__select option:checked {
		background-color: var(--bcom-accent-50);
		font-weight: var(--bcom-fw-medium);
	}

	.bcom-atoolbar .bcom-atoolbar__select-wrap .bcom-atoolbar__select option::checkmark {
		display: none;
	}
}

.bcom-atoolbar__active {
	display: flex;
	flex: 1 0 100%;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bcom-atb-chip-gap, var(--bcom-space-2));
	order: 10;
	min-width: 0;
}

.bcom-atoolbar__active[hidden] {
	display: none;
}

.bcom-atoolbar__chips {
	display: contents;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bcom-atoolbar__chip-item {
	display: flex;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.bcom-atoolbar__chip {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	min-height: 32px;
	padding-block: 4px;
	padding-inline: 12px 9px;
	border: 1px solid var(--bcom-atb-chip-border, var(--bcom-line-strong));
	border-radius: var(--bcom-atb-chip-radius, var(--bcom-radius-pill));
	background-color: var(--bcom-atb-chip-bg, var(--bcom-surface));
	color: var(--bcom-atb-chip-fg, var(--bcom-fg));
	font-size: var(--bcom-fs-sm);
	font-weight: var(--bcom-fw-medium);
	line-height: var(--bcom-lh-snug);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--bcom-dur-fast) var(--bcom-atb-ease), border-color var(--bcom-dur-fast) var(--bcom-atb-ease), color var(--bcom-dur-fast) var(--bcom-atb-ease), transform var(--bcom-dur-fast) var(--bcom-atb-ease);
}

.bcom-atoolbar__chip-label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bcom-atoolbar__chip .bcom-atoolbar__chip-icon {
	flex: none;
	width: 14px;
	height: 14px;
	color: var(--bcom-atb-chip-icon, currentColor);
}

.bcom-atoolbar__chip:active {
	transform: scale(0.97);
}

.bcom-atoolbar__clear {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding-inline: 4px;
	border-radius: var(--bcom-radius-xs);
	color: var(--bcom-atb-clear, var(--bcom-fg-brand));
	font-size: var(--bcom-fs-sm);
	font-weight: var(--bcom-fw-semibold);
	text-decoration: none;
	transition: color var(--bcom-dur-fast) var(--bcom-atb-ease);
}

@media (hover: hover) and (pointer: fine) {
	.bcom-atoolbar .bcom-atoolbar__select-wrap .bcom-atoolbar__select:not(:focus):hover {
		border-color: var(--bcom-muted);
	}

	.bcom-atoolbar .bcom-atoolbar__view-btn[aria-pressed="false"]:hover {
		background-color: var(--bcom-surface);
		color: var(--bcom-fg);
	}

	.bcom-atoolbar__chip:hover {
		border-color: var(--bcom-atb-chip-border-hover, var(--bcom-fg));
		background-color: var(--bcom-atb-chip-bg-hover, var(--bcom-bg-elevated));
		color: var(--bcom-atb-chip-fg-hover, var(--bcom-atb-chip-fg, var(--bcom-fg)));
	}

	.bcom-atoolbar__clear:hover {
		color: var(--bcom-atb-clear-hover, var(--bcom-accent-text));
	}
}

@media (min-width: 960px) {
	.bcom-atoolbar__filters {
		display: none;
	}
}

@media (max-width: 767px) {
	.bcom-atoolbar {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto auto;
		align-items: end;
		gap: var(--bcom-space-3) var(--bcom-space-2);
	}

	.bcom-atoolbar__filters {
		order: 1;
		width: 100%;
		min-height: var(--bcom-field-h, 48px);
	}

	.bcom-atoolbar__view {
		order: 2;
	}

	.bcom-atoolbar__per-page {
		order: 3;
	}

	.bcom-atoolbar__sort {
		order: 4;
		grid-column: 1 / -1;
	}

	.bcom-atoolbar__count {
		order: 5;
		grid-column: 1 / -1;
		min-height: 0;
		margin: 0;
	}

	.bcom-atoolbar__active {
		order: 6;
		grid-column: 1 / -1;
	}

	.bcom-atoolbar:not(:has(.bcom-atoolbar__filters)) :is(.bcom-atoolbar__view, .bcom-atoolbar__per-page):first-of-type {
		grid-column-start: 1;
	}

	.bcom-atoolbar__sort .bcom-atoolbar__select-wrap,
	.bcom-atoolbar .bcom-atoolbar__sort .bcom-atoolbar__select {
		width: 100%;
		min-width: 0;
	}

	.bcom-atoolbar__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bcom-atoolbar .bcom-atoolbar__select-wrap .bcom-atoolbar__select,
	.bcom-atoolbar .bcom-atoolbar__select-wrap .bcom-atoolbar__select::picker-icon,
	.bcom-atoolbar__chip,
	.bcom-atoolbar__clear,
	.bcom-atoolbar .bcom-atoolbar__view-btn {
		transition: none;
	}
}

@media (min-width: 768px) {
	.bcom-atoolbar {
		--bcom-field-h: 38px;
		--bcom-atb-sort-w: 192px;
	}

	.bcom-atoolbar .bcom-atoolbar__view-btn .bcom-icon {
		width: 16px;
		height: 16px;
	}

	.bcom-atoolbar .bcom-atoolbar__select-wrap .bcom-atoolbar__select {
		padding: 0 36px 0 12px;
		background-position: right 11px center;
		background-size: 16px 16px;
		font-size: 13px;
	}

	.bcom-atoolbar .bcom-atoolbar__select-wrap .bcom-atoolbar__select::picker-icon {
		width: 16px;
		height: 16px;
	}

	.bcom-atoolbar .bcom-atoolbar__select-wrap .bcom-atoolbar__select::picker(select) {
		font-size: 13px;
	}

	.bcom-atoolbar .bcom-atoolbar__select-wrap .bcom-atoolbar__select option {
		min-height: 36px;
		padding: 8px 12px;
	}
}

@media (min-width: 768px) {
	@supports (appearance: base-select) {
		.bcom-atoolbar .bcom-atoolbar__select-wrap .bcom-atoolbar__select {
			gap: 8px;
			padding-inline-end: 12px;
		}
	}
}