.bg-divider {
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0);
	width: 100%;
	pointer-events: none;
	z-index: 1;
	line-height: 0;
	overflow: hidden;
	direction: ltr;

	&::after {
		display: block;
		position: absolute;
		content: '';
	}

	svg {
		width: calc(100% + 1.3px);
		height: 100px;
		display: block;
		position: relative;
		left: 50%;
		transform: translateX(-50%);

		&:not(:root) {
			overflow: hidden;
		}
	}

	&.bg-divider-bottom {
		bottom: 0;
		transform: translateY(100%);

		&.bg-divider-upward {
			transform: rotate(180deg);
		}
	}

	&.bg-divider-clouds svg {
		transform: rotate(180deg) translateX(50%);
	}

	&.bg-divider-arrow svg {
		height: 50px;
	}

	&.bg-divider-waves svg {
		top: 0;
		height: 30px;
	}

	&.bg-divider-drops svg {
		height: 160px;
	}

	&.bg-divider-top {
		top: 0;
		bottom: initial;

		&.bg-divider-upward {
			transform: rotate(180deg);
		}
	}
}