@use 'sass:math';
// core/separator

@import '../_tools/_index';
@import '../_setup/_index';

.wp-block-separator {
	border-color: inherit;
	border-bottom-width: 0;

	&.has-background {
		padding: 0 !important;
	}

	.is-layout-flex:not(.is-vertical) > & {
		flex-grow: 1;
	}

	&.is-style-dots {

		&::before {
			content: '●●●';
			padding-inline-start: 1em;
			font-family: sans-serif;
			font-size: 1em;
			letter-spacing: 1em;
		}
	}

	$size_dash : 20;
	$size_dot  : 8;

		&.is-style-dotted,
		&.is-style-dashed {
			border-width: 0;
			height: 2px;
			background-size: $size_dash + px !important;
			background-image:
				linear-gradient(
					90deg,
					var(--theme--css--current-border-color) #{ math.div( $size_dash, 2 ) + px },
					transparent #{ math.div( $size_dash, 2 ) + 1px },
					transparent #{ $size_dash + px }
				) !important;

			&[class] {
				background-color: transparent !important; // Important is due to WordPress forcing the user selected colors with `!important`.
			}

			&.has-text-color {
				--theme--css--current-border-color: currentColor;
			}
		}

		&.is-style-dotted {
			background-size: $size_dot + px !important;
			background-image:
				linear-gradient(
					90deg,
					var(--theme--css--current-border-color) 2px,
					transparent 3px,
					transparent #{ $size_dot + px }
				) !important;
		}
}
