/**
 * BW Dev — Separator block. Lines + symbol divider.
 *
 * Both the lines and the symbol use `currentColor`, so a single inline
 * `style="color: …"` on the wrapper colors the whole element. SVG symbols are
 * rendered via `mask-image` (with a CSS variable holding the URL) so the
 * uploaded SVG inherits the picked color regardless of the SVG's internal
 * fills — this works because the visible element is a colored div masked by
 * the SVG shape, not the SVG itself.
 */
.bw-dev-separator {
	display: flex;
	align-items: center;
	margin: 14px 0 24px;
}
.bw-dev-separator__inner {
	display: flex;
	align-items: center;
	gap: 14px;
}
.bw-dev-separator__line {
	width: 52px;
	height: 1px;
	background: currentColor;
	opacity: 0.45;
}
.bw-dev-separator__symbol {
	font-size: 14px;
	line-height: 1;
	color: currentColor;
}
.bw-dev-separator__symbol--svg {
	display: inline-block;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: var(--bw-dev-sep-svg) center / contain no-repeat;
	        mask: var(--bw-dev-sep-svg) center / contain no-repeat;
}
.bw-dev-separator--left   { justify-content: flex-start; }
.bw-dev-separator--center { justify-content: center; }
.bw-dev-separator--right  { justify-content: flex-end; }