// core/separator
//
// @since    1.0.0
// @version  2.0.0
@use 'sass:math';

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

.wp-block-separator {
	border-color: inherit;
	border-top-width: var(--wp--custom--hr--border-width);
	border-bottom-width: 0;

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

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

	&.is-style-dots {

		&::before {
			content: '';
			display: inline-block;
			width: 3em;
			height: .5em;
			background: radial-gradient( currentColor 25%, transparent 25% );
			background-size: 1em 1em;
			background-repeat: repeat-x;
			background-position: 50% 50%;
		}
	}

	$size_dash : 20;
	$size_dot  : 8;

		&.is-style-dotted,
		&.is-style-dashed {
			border-width: 0;
			height: var(--wp--custom--hr--border-width);
			background-size: $size_dash + px !important;
			background-image:
				linear-gradient(
					90deg,
					var(--wp--custom--hr--dashed--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 {
				--wp--custom--hr--dashed--color: currentColor;
				--wp--custom--hr--dotted--color: currentColor;
			}
		}

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