$breakpoint-sm: 782px;
$breakpoint-md: 1000px;
$breakpoint-lg: 1200px;
$breakpoint-xl: 1500px;
$breakpoint-xxl: 1760px;


.aw-rules-container {
	padding: 14px 20px 9px;
}


.aw-rule-group__or {
	margin: 26px -20px 23px;
	border-bottom: 1px solid $grey-light-border;
	text-align: center;
	position: relative;

	span {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		color: #a9a9a9;
		display: inline-block;
		background: $white;
		padding: 0 13px;
		top: -9px;
		letter-spacing: 1px;
		text-transform: uppercase;
		font-size: 13px;
	}
}


.aw-rule-group {

	&:last-child {
		margin-bottom: 10px;

		.aw-rule-group__or {
			display: none;
		}
	}
}



.automatewoo-rule-container {}


.automatewoo-rule {

	width: 100%;
	box-sizing: border-box;
	position: relative;
	padding: 7px 0;
	@include clearfix();

	@media ( min-width: $breakpoint-lg) {
		padding-right: 79px;
	}

	&__buttons {
		position: absolute;
		bottom: 4px;
		right: -1px;

		@media ( min-width: ($breakpoint-sm + 1)) {
			bottom: 8px;
		}

		@media ( min-width: $breakpoint-lg) {
			top: 8px;
			bottom: auto;
		}

		.automatewoo-rule--type-select &{
			min-height: 46px;

			@media ( min-width: ($breakpoint-sm + 1)) {
				min-height: 34px;
			}
		}
	}


	&__add {
		float: left;
		padding: 0 8px 1px;
	}

	&__remove {
		display: block;
		float: left;
		position: relative;
		top: 9px;
		width: 23px;
		height: 23px;
		margin-left: 6px;
		border: 1px solid #c5c5c5;
		border-radius: 50%;
		background: transparent;
		cursor: pointer;

		&:after {
			display: block;
			content: '';
			width: 11px;
			height: 1px;
			position: absolute;
			top: 10px;
			left: 5px;
			background: #c5c5c5;
		}

		&:hover {
			border-color: $red;
			background: $red-light;

			&:after {
				background: $white;
			}
		}

		@media ( min-width: ( $breakpoint-sm + 1 ) ) {
			top: 4px;
		}
	}


	&__fields {
		width: 100%;

		.aw-rule-select-container {
			width: 50%;
			padding-left: 0;

			select {
				width: 100%;
			}
		}


		.aw-rule-field-compare {
			width: 50%;
		}

		.aw-rule-field-value {
			position: relative;
			width: 100%;
			padding-left: 0;
			padding-top: 8px;
			padding-right: 94px;

			.aw-loader {
				position: absolute;
				top: 14px;
				left: 20px;
			}

			select,
			.select2-container {
				width: 100% !important;

				.select2-search__field {
					max-width: 50px;
				}
			}

			@media ( min-width: ( $breakpoint-sm + 1 ) ) {
				padding-right: 85px;
			}
		}

		@media ( min-width: $breakpoint-lg ) {

			.aw-rule-select-container {
				width: 35%;
			}

			.aw-rule-field-compare {
				width: 20%;
			}

			.aw-rule-field-value {
				padding: 0 6px;
				width: 45%;
			}
		}

		@media ( min-width: $breakpoint-xl ) {

			.aw-rule-select-container {
				width: 30%;
			}

			.aw-rule-field-compare {
				width: 18%;
			}

			.aw-rule-field-value {
				width: 52%;
			}
		}


		@media ( min-width: $breakpoint-xxl ) {

			.aw-rule-select-container {
				width: 26%;
			}

			.aw-rule-field-compare {
				width: 16%;
			}

			.aw-rule-field-value {
				width: 58%;
			}
		}
	}


	&__field-container {
		float: left;
		width: 100px;
		box-sizing: border-box;
		padding: 0 6px;
	}


	&--type-meta {
		.js-rule-value-field {
			width: 48%;
			float: left;

			@media ( min-width: $breakpoint-xl ) {
				width: 48.7%;
			}

			&:last-child {
				float: right;
			}
		}
	}

	&--type-meta.automatewoo-rule--compare-blank,
	&--type-meta.automatewoo-rule--compare-not_blank {
		.js-rule-value-field {
			width: 100%;

			&:last-child {
				display: none;
			}
		}
	}

}

// fix height of text and number inputs
.automatewoo-rule input.automatewoo-field {
	height: 28px;
}

.automatewoo-missing-rule {
	padding: 8px 9px;
	margin: 7px 0;
	border: 1px solid $red;
	border-radius: 4px;
	color: $red;
	font-weight: 500;
	line-height: 1.3;
}