@use "~admin-stylesheets/colors";

.nab-edit-experiment-layout__content
	> .nab-edit-experiment__alternative-distribution-section {
	padding-top: 1em;

	h2 {
		font-size: 1.1em;

		.dashicon {
			margin-top: -3px;
		}
	}
}

.nab-alternative-distribution-setting {

	&__distribution-bar {
		height: 1em;
		width: 100%;
		display: flex;
		flex-direction: row;

		$colors: (
			colors.$nab-background-alternative-a,
			colors.$nab-background-alternative-b,
			colors.$nab-background-alternative-c,
			colors.$nab-background-alternative-d,
			colors.$nab-background-alternative-e,
			colors.$nab-background-alternative-f
		);
		$i: 1;

		@each $color in $colors {
			div.nab-alternative-distribution-setting__variant:nth-child(
					6n + #{$i}
				) {
				background: $color;
			}
			$i: $i + 1;
		}
	}

	&__variant-tooltip {
		height: 100%;
		width: 100%;
	}

	&__variant-handler {
		background: colors.$nab-background-white;
		border: 1px solid colors.$nab-border;
		box-sizing: border-box;
		cursor: col-resize;
		position: absolute;
		height: 100%;
		width: 10px;
		right: -5px;
		top: 0;
		z-index: 1;

		&:active,
		&:focus {
			border-color: colors.$wp-components-color-accent;
			outline: 2px solid colors.$wp-components-color-accent;
		}
	}
}