//
// Divider
//

.elementor-widget-divider {
	--divider-border-style: none;
	--divider-border-width: 1px;
	--divider-color: #{$gray-darkest};
	--divider-icon-size: 20px;
	--divider-element-spacing: 10px;
	--divider-pattern-height: 24px;
	--divider-pattern-size: 20px;
	--divider-pattern-url: none;
	--divider-pattern-repeat: repeat-x;

	.elementor-divider {
		display: flex;

		&__text {
			font-size: 15px;
			line-height: 1;
			max-width: 95%;
		}

		&__element {
			margin: 0 var(--divider-element-spacing);
			flex-shrink: 0;
		}
	}

	.elementor-icon {
		font-size: var(--divider-icon-size);
	}

	.elementor-divider-separator {
		display: flex;
		margin: 0;
		direction: ltr;
	}

	&--view {

		&-line_text, &-line_icon {
			.elementor-divider-separator{
				align-items: center;

				&:before, &:after {
					display: block;
					content: '';
					border-block-end: 0;
					flex-grow: 1;
					border-block-start: var(--divider-border-width) var(--divider-border-style) var(--divider-color);
				}
			}
		}
	}

	&--element-align {

		// TODO: Delete when we fully migrate to logical properties.
		&-left {

			.elementor-divider {

				.elementor-divider-separator > .elementor-divider__svg:first-of-type {
					flex-grow: 0;
					flex-shrink: 100;
				}

				&-separator:before {
					content: none;
				}

				&__element {
					margin-left: 0;
				}
			}
		}

		// TODO: Delete when we fully migrate to logical properties.
		&-right {

			.elementor-divider {

				.elementor-divider-separator > .elementor-divider__svg:last-of-type {
					flex-grow: 0;
					flex-shrink: 100;
				}

				&-separator:after {
					content: none;
				}

				&__element {
					margin-right: 0;
				}
			}
		}

		&-start {

			.elementor-divider {

				.elementor-divider-separator > .elementor-divider__svg:first-of-type {
					flex-grow: 0;
					flex-shrink: 100;
				}

				&-separator:before {
					content: none;
				}

				&__element {
					margin-inline-start: 0;
				}
			}
		}

		&-end {

			.elementor-divider {

				.elementor-divider-separator > .elementor-divider__svg:last-of-type {
					flex-grow: 0;
					flex-shrink: 100;
				}

				&-separator:after {
					content: none;
				}

				&__element {
					margin-inline-end: 0;
				}
			}
		}		
	}

	&:not(.elementor-widget-divider--view-line_text):not(.elementor-widget-divider--view-line_icon) {
		.elementor-divider-separator {
			border-block-start: var(--divider-border-width) var(--divider-border-style) var(--divider-color);
		}
	}

	&--separator-type {

		&-pattern {
			--divider-border-style: none;

			&.elementor-widget-divider--view-line .elementor-divider-separator,
			&:not([class*=elementor-widget-divider--view]) .elementor-divider-separator, // BC since v3.0.10
			&:not(.elementor-widget-divider--view-line) .elementor-divider-separator:before,
			&:not(.elementor-widget-divider--view-line) .elementor-divider-separator:after {
				width: 100%;
				min-height: var(--divider-pattern-height);
				-webkit-mask-size: var(--divider-pattern-size) 100%;
				mask-size: var(--divider-pattern-size) 100%;
				-webkit-mask-repeat: var(--divider-pattern-repeat);
				mask-repeat: var(--divider-pattern-repeat);
				background-color: var(--divider-color);
				-webkit-mask-image: var(--divider-pattern-url);
				mask-image: var(--divider-pattern-url);
			}
		}
	}

	&--no-spacing {
		--divider-pattern-size: auto;
	}

	&--bg-round {
		--divider-pattern-repeat: round;
	}
}

.rtl .elementor-widget-divider .elementor-divider__text {
	direction: rtl;
}

.e-con,
.e-con-inner {

	& > .elementor-widget-divider {
		// Fix - Divider widget has undefined width and height issues inside the flex container (ED-7722).
		width: var( --container-widget-width , 100%);
	  	--flex-grow: var( --container-widget-flex-grow );
	}
}
