@use "~admin-stylesheets/colors";

.nab-test-panel {
	align-items: center;
	display: flex;
	justify-content: flex-start;

	&__icon {
		border-radius: 50%;
		border: 1px solid colors.$nab-border-light;
		box-sizing: content-box;
		flex-grow: 0;
		flex-shrink: 0;
		font-size: 2em;
		height: 1em;
		line-height: 1;
		margin-right: 5px;
		padding: 8px;
		width: 1em;
	}

	&__name {
		font-size: 1em;
		margin-left: 5px;
	}
}

.nab-variants-panel {
	display: block;

	&__title {
		display: block;
		font-weight: 600 !important;
		margin-bottom: 1em !important;
		padding: 0 !important;
	}
}

.nab-content-panel {
	display: block;

	&__title {
		display: block;
		font-weight: 600 !important;
		margin-bottom: 1em !important;
		padding: 0 !important;
	}

	&__label {
		display: flex;
		margin-bottom: 5px;
	}

	&__searcher {
		margin-top: 1em;
	}

	&__actions {
		align-items: baseline;
		display: flex;
		justify-content: flex-end;
		margin-top: 1em;

		.is-link {
			margin-right: 5px;
		}
	}
}

.nab-alternative {
	align-items: center;
	display: flex;
	justify-content: flex-start;
	margin-bottom: 0.5em;

	&:last-child {
		margin-bottom: 0;
	}

	&__letter {
		border-radius: 50%;
		box-sizing: content-box;
		color: colors.$nab-text-inverted;
		display: block;
		flex-grow: 0;
		flex-shrink: 0;
		font-size: 0.9rem;
		height: 1em;
		line-height: 1;
		margin: 0;
		margin-right: 0.5em;
		padding: 0.5em;
		text-align: center;
		transition:
			250ms background ease-in-out,
			250ms color ease-in-out;
		width: 1em;
	}

	$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 {
		.nab-variants-panel &:nth-child(6n + #{$i}) &__letter {
			background: $color;
		}
		$i: $i + 1;
	}
}