@import "../../../assets/styles/scss/utilities/functions";
@import "../../../assets/styles/scss/utilities/variables";
@import "../../../assets/styles/scss/utilities/mixins";
@import "../../../assets/styles/scss/utilities/default-variables"; // check

$p-mb: 20px;

.spacer {
	opacity: 1;
	position: relative;
	width: 100%;
	margin-block-start: 0px !important;
	display: flex;

	&.line-enable {
		&.position-top {
			align-items: flex-start;

			&.line-type-solid {
				border-top: 1px solid var(--border-color);
			}

			&.line-type-dash {
				border-top: 1px dashed var(--border-color);
			}

			&.line-type-dots::after {
				content: "";
				display: flex;
				width: 100%;
				height: 2px;
				background: var(--border-color);
				mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='2'%3E%3Ccircle cx='5' cy='1' r='1' /%3E%3C/svg%3E");
				mask-repeat: repeat-x;
				mask-position: bottom;
				mask-size: 10px 2px;
			}
		}

		&.position-bottom {
			align-items: flex-end;

			&.line-type-solid {
				border-bottom: 1px solid var(--border-color);
			}

			&.line-type-dash {
				border-bottom: 1px dashed var(--border-color);
			}

			&.line-type-dots::after {
				content: "";
				display: flex;
				width: 100%;
				height: 2px;
				background: var(--border-color);
				mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='2'%3E%3Ccircle cx='5' cy='1' r='1' /%3E%3C/svg%3E");
				mask-repeat: repeat-x;
				mask-position: bottom;
				mask-size: 10px 2px;
			}
		}
	}

	&__extra-small {
		height: 20px;

		@include media-breakpoint-up(md) {
			height: 30px;
		}
	}

	&__small {
		height: 40px;

		@include media-breakpoint-up(md) {
			height: 60px;
		}
	}

	&__normal {
		height: 50px;

		@include media-breakpoint-up(md) {
			height: 75px;
		}
	}

	&__large {
		height: 80px;

		@include media-breakpoint-up(md) {
			height: 100px;
		}
	}

	&__huge {
		height: 120px;

		@include media-breakpoint-up(md) {
			height: 200px;
		}
	}
}

body:not(body.wp-admin) {
	p + .spacer__extra-small {
		height: 0;

		@include media-breakpoint-up(md) {
			height: 30px - $p-mb;
		}
	}

	p + .spacer__small {
		height: 20px - $p-mb;

		@include media-breakpoint-up(md) {
			height: 60px - $p-mb;
		}
	}

	p + .spacer__normal {
		height: 50px - $p-mb;

		@include media-breakpoint-up(md) {
			height: 75px - $p-mb;
		}
	}

	p + .spacer__large {
		height: 80px - $p-mb;

		@include media-breakpoint-up(md) {
			height: 110px - $p-mb;
		}
	}

	p + .spacer__huge {
		height: 120px - $p-mb;

		@include media-breakpoint-up(md) {
			height: 200px - $p-mb;
		}
	}
}