.wp-block-separator {
	border-top: 2px solid currentColor;
	// Default, thin style, is stored in theme.scss so it can be opted out of

	// Unset the left, right and bottom borders by default, otherwise some browsers will render them as "inset".
	border-left: none;
	border-right: none;
	border-bottom: none;
}

// Dots block style variation
:root :where(.wp-block-separator.is-style-dots) {
	text-align: center;
	line-height: 1;
	height: auto;

	&::before {
		content: "\00b7 \00b7 \00b7";
		color: currentColor;
		font-size: 1.5em;
		letter-spacing: 2em;
		/*rtl:ignore*/
		padding-left: 2em;
		font-family: serif;
	}
}

// The following overrides should be enforced regardless of global styles.
// The dots block style uses a pseudo element to render the dots. Background
// color and borders would break this aesthetic.
.wp-block-separator.is-style-dots {
	// Override any background themes often set on the hr tag for this style.
	// also override the color set in the editor since it's intended for normal HR
	background: none !important;
	// Important required to ensure dots does not get a border.
	border: none !important;
}