.ObFilterEditor-root {
	display: flex;
	flex-direction: column;
	gap: var(--ds-size-2);
	min-block-size: 0;
}

/*
 * The conditions scroll, the generated filter string does not, so it stays in
 * view at the foot of the editor. The flex basis keeps the scroll area usable
 * when the editor is short, as on a phone, but — unlike a minimum height — it
 * still lets the editor shrink when it shares a fixed height with content below
 * it, which would otherwise overflow and overlap that content.
 */
.ObFilterEditor-body {
	display: flex;
	flex-direction: column;
	gap: var(--ds-size-2);
	flex: 1 1 min(16rem, 50dvh);
	min-block-size: 0;
	overflow: auto;
}

.ObFilterEditor-filterString {
	flex: 0 0 auto;
}

.ObFilterEditor-intro {
	margin: 0;
	color: var(--ds-color-neutral-text-subtle);
	font-size: var(--ds-font-size-2);
}

.ObFilterEditor-groups {
	display: flex;
	flex-direction: column;
	gap: var(--ds-size-3);
}

.ObFilterEditor-group {
	display: flex;
	flex-direction: column;
	gap: var(--ds-size-2);
}

/*
 * The border is drawn around the conditions only, not the group header, and the
 * whole box is indented so the header reads as owning the conditions below it
 * rather than as a sibling of the first one.
 */
.ObFilterEditor-groupItems {
	display: flex;
	flex-direction: column;
	gap: var(--ds-size-2);

	margin-inline-start: var(--ds-size-4);
	padding: var(--ds-size-2);
	border: 1px solid var(--ds-color-neutral-border-subtle);
	border-radius: var(--ds-border-radius-md);
}

/* Nested groups are tinted so the tree structure is readable. */
.ObFilterEditor-groupItems .ObFilterEditor-groupItems {
	background-color: var(--ds-color-neutral-surface-tinted);
}

.ObFilterEditor-groupHeader {
	display: flex;
	align-items: center;
	gap: var(--ds-size-2);
	flex-wrap: wrap;
}

.ObFilterEditor-groupButton svg {
	flex: 0 0 auto;
}

/*
 * The group buttons do not fit next to the operator select on a phone, so only
 * their icon is shown. `aria-label` carries the name either way.
 */
@media (width < 40rem) {
	.ObFilterEditor-groupButtonLabel {
		display: none;
	}

	.ObFilterEditor-groupItems {
		margin-inline-start: var(--ds-size-2);
	}
}

.ObFilterEditor-groupMode {
	flex: 0 0 auto;
	width: auto;
	min-width: 6rem;
}

.ObFilterEditor-groupLabel {
	font-weight: 600;
	font-size: var(--ds-font-size-2);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ds-color-neutral-text-subtle);
}

.ObFilterEditor-row {
	display: flex;
	align-items: center;
	gap: var(--ds-size-2);
	flex-wrap: wrap;
}

/*
 * On narrow viewports the parts of a condition wrap onto several lines, which
 * makes neighbouring conditions run together. Separate them with extra spacing
 * and a rule so it stays obvious where one condition ends and the next begins.
 */
@media (width < 40rem) {
	.ObFilterEditor-row {
		gap: var(--ds-size-3);
		padding-block-end: var(--ds-size-3);
	}

	.ObFilterEditor-row:not(:last-child) {
		border-block-end: 1px solid var(--ds-color-neutral-border-subtle);
	}
}

.ObFilterEditor-field {
	flex: 1 1 12rem;
	min-width: 10rem;
}

.ObFilterEditor-operator {
	flex: 0 1 12rem;
	min-width: 8rem;
}

.ObFilterEditor-valueCell {
	display: flex;
	align-items: center;
	gap: var(--ds-size-1);
	flex: 2 1 14rem;
	min-width: 10rem;
}

.ObFilterEditor-value {
	flex: 1 1 auto;
	min-width: 0;
}

.ObFilterEditor-pair {
	display: flex;
	align-items: center;
	gap: var(--ds-size-2);
	flex: 1 1 auto;
	min-width: 0;
}

.ObFilterEditor-pairSeparator {
	flex: 0 0 auto;
	color: var(--ds-color-neutral-text-subtle);
	font-size: var(--ds-font-size-2);
}

.ObFilterEditor-chipList {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--ds-size-1);
	flex: 1 1 auto;
	min-width: 0;
}

.ObFilterEditor-chipListInput {
	flex: 1 1 6rem;
	min-width: 6rem;
}

.ObFilterEditor-iconButton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;

	width: 2rem;
	height: 2rem;
	padding: 0;

	background: none;
	border: none;
	border-radius: var(--ds-border-radius-md);
	color: var(--ds-color-neutral-text-subtle);
	cursor: pointer;

	&:hover {
		background-color: var(--ds-color-neutral-surface-hover);
		color: var(--ds-color-neutral-text-default);
	}

	&[aria-pressed="true"] {
		background-color: var(--ds-color-surface-active);
		color: var(--ds-color-text-default);
	}

	svg {
		width: 1.25rem;
		height: 1.25rem;
	}
}

.ObFilterEditor-filterString {
	display: flex;
	flex-direction: column;
	gap: var(--ds-size-1);
}

.ObFilterEditor-hint {
	color: var(--ds-color-neutral-text-subtle);
	font-size: var(--ds-font-size-1);
}

/*
 * The converting hint sits on the label row rather than under the input, so that
 * it appearing and disappearing does not shift the layout.
 */
.ObFilterEditor-filterStringLabel {
	display: flex;
	align-items: baseline;
	gap: var(--ds-size-2);
}