@use "~admin-stylesheets/colors";

.nab-experiment-scope {

	p {
		margin-top: 0;
	}

	.components-checkbox-control__help {
		margin-top: 0.5em;
	}

	&__rule-list {
		margin: 0;
	}

	&__rule-list-item {
		display: grid;
		gap: 0.5em;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"type  type"
			"value value";

		&--has-sorting {
			grid-template-areas:
				"type  sorting"
				"value value";
		}

		&:not(:first-child) {
			position: relative;
			margin-top: 9px;
			padding-top: 14px;
			border-top: 1px solid colors.$nab-border-light;

			&:not(:last-child)::before {
				content: attr(data-operator);
				display: block;
				background: colors.$nab-background-white;
				position: absolute;
				top: -10px;
				left: 50%;
				text-transform: uppercase;
				transform: translateX(-50%);
				padding: 0 1em;
				font-size: 10px;
				font-weight: 600;
			}
		}
	}

	&__rule-mode {
		grid-area: type;

		.components-base-control__field {
			margin-bottom: 0;
		}
	}

	&__rule-sorting {
		grid-area: sorting;
	}

	&__rule-value {
		grid-area: value;
	}

	&__rule-value.components-base-control {
		margin-bottom: 0;

		> * {
			margin-bottom: 0;
		}
	}
}