@use "sass:math";

@mixin createHorizontalBrackets($left: -16px, $top: 17px) {
	&::after {
		content: "";
		position: absolute;
		top: $top;
		left: $left;
		z-index: 1;
		width: 13px;
		border-top: 2px solid $bracketColor;
		pointer-events: none;
		transform: translateY(-1px);
	}
}

@mixin removeHorizontalBrackets() {
	&::after {
		content: none;
	}
}

@mixin changeHorizontalBracketsColor($color) {
	& ~ .kit-filtration-group__buttons,
	& ~ .kit-filtration-condition > .kit-filtration-condition__item-text,
	&
		~ .kit-filtration-group
		> .kit-filtration-group__label-line
		.kit-filtration-group__label-line-horizontal {
		&::after {
			border-top-color: $color;
		}
	}
}

@mixin changeHorizontalBracketsOpacity($opacity) {
	> .kit-filtration-group__label {
		& ~ .kit-filtration-group__buttons {
			&::after {
				opacity: $opacity;
			}
		}

		& ~ .kit-filtration-condition > .kit-filtration-condition__item-text {
			&::after {
				opacity: $opacity;
			}
		}

		& ~ .kit-filtration-group {
			> .kit-filtration-group__label-line
				.kit-filtration-group__label-line-horizontal {
				&::after {
					opacity: $opacity;
				}
			}
		}

		&
			~ .kit-filtration-group__label-line
			.kit-filtration-group__label-line-vertical {
			z-index: 3;
			opacity: $opacity;
		}
	}
}

@mixin createVerticalSmallBracket() {
	> .kit-filtration-condition > .kit-filtration-group {
		> .kit-filtration-condition:first-of-type,
		> .kit-filtration-group__buttons,
		&.kit-filtration-group_not-children:not(&.kit-filtration-group_no-label) {
			&::before {
				content: "";
				position: absolute;
				top: 0;
				left: 4px;
				z-index: 1;
				display: block;
				width: 2px;
				height: #{math.div($minHeight, 2)};
				background-color: $bracketColor;
				pointer-events: none;
			}
		}

		> .kit-filtration-group__buttons {
			&::before {
				left: -16px;
			}
		}

		> .kit-filtration-condition:first-of-type {
			&::before {
				left: -13px;
			}
		}

		> .kit-filtration-group:first-of-type:not(.kit-filtration-group_not-children) {
			&::before {
				content: "";
				position: absolute;
				top: 0;
				left: -26px;
				z-index: 1;
				display: block;
				width: 2px;
				height: math.div($minHeight, 2);
				background-color: $bracketColor;
				pointer-events: none;
			}
		}
	}
}

@mixin changeColorVerticalSmallBracket($color) {
	& ~ .kit-filtration-condition:first-of-type,
	& ~ .kit-filtration-group:first-of-type,
	&
		~ .kit-filtration-group__buttons:not(.kit-filtration-group__buttons_no-children),
	&.kit-filtration-group_not-children {
		&::before {
			/* stylelint-disable-next-line declaration-no-important */
			background-color: $color !important;
		}
	}

	&.kit-filtration-group_not-children {
		z-index: 1;
	}

	&.kit-filtration-group_not-children.kit-filtration-group_edit {
		z-index: 5;
	}
}

@mixin changeVerticalSmallBracketOpacity($opacity) {
	> .kit-filtration-condition,
	> .kit-filtration-group__buttons,
	> .kit-filtration-group,
	&.kit-filtration-group_not-children {
		&::before {
			opacity: $opacity;
		}
	}
}