hr {
	border-bottom: #{map-deep-get($config-separator, "height")} solid #{map-deep-get($config-global, "color", "border", "default")};
	clear: both;
	margin-left: auto;
	margin-right: auto;

	&.wp-block-separator {
		border-bottom: #{map-deep-get($config-separator, "height")} solid #{map-deep-get($config-global, "color", "border", "default")};

		&:not(.is-style-wide):not(.is-style-dots) {
			max-width: #{map-deep-get($config-separator, "width")};
		}

		/**
		 * Block Options
		 */
		&.is-style-wide {
			border-bottom-width: #{map-deep-get($config-separator, "height")}
		}

		&.is-style-wide {
			@extend %responsive-aligndefault;
		}

		&.is-style-dots {

			&.has-background,
			&.has-text-color {
				background-color: transparent !important;

				&:before {
					color: currentColor !important;
				}
			}

			&:before {
				color: #{map-deep-get($config-global, "color", "border", "default")};
				font-size: #{map-deep-get($config-global, "font", "size", "xl")};
				letter-spacing: #{map-deep-get($config-global, "font", "size", "sm")};
				padding-left: #{map-deep-get($config-global, "font", "size", "sm")};
			}
		}

		.has-background:not(.has-background-background-color) &,
		[class*="background-color"]:not(.has-background-background-color) &,
		[style*="background-color"] &,
		.wp-block-cover[style*="background-image"] & {
			border-color: currentColor;
		}
	}
}