@use "~admin-stylesheets/colors";

.nab-experiment-selector__container {
	display: inline-block;
}

.nab-new-experiment-dialog {
	color: colors.$wp-components-color-accent;
	cursor: default;

	> div {
		max-height: 400px;
		width: 32em;
	}
}

.nab-experiment-type-list {
	padding: 1.5em;

	&:not(:first-child) {
		padding-top: 0;
	}

	&__title {
		color: colors.$nab-text-dark-grey;
		font-size: 0.8em;
		margin: 0;
		margin-top: 2em;
		text-transform: uppercase;

		&:first-child {
			margin-top: 0;
		}
	}

	&__types {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.6em;
		margin: 0;
		padding: 0;
	}

	&__experiment-icon {
		display: block;
		font-size: 2.8em;
		height: 1em;
		margin: 0.3rem;
		width: 1em;
	}

	&__experiment-type--is-disabled #{&}__experiment-icon {
		opacity: 0.2;
		filter: saturate(0);
	}

	&__experiment-type {
		box-sizing: border-box;
		font-size: 0.8em;
		margin: 0;
		padding: 0.1em;
		text-align: center;
		width: 8em;

		button,
		.components-button {
			align-items: center;
			cursor: pointer;
			display: flex;
			flex-direction: column;
			font-size: 1em;
			height: auto;
			width: 100%;
		}
	}

	&__experiment-type--is-creating {
		cursor: default;

		button {
			opacity: 1;

			.nab-experiment-type-list__experiment-icon {
				animation: nab-experiment-type-list__create-animation 1.2s
					cubic-bezier(0, 0, 0.58, 1) 200ms infinite;
			}

			span {
				color: colors.$nab-text;
			}
		}
	}

	&__experiment-type--is-disabled {
		cursor: default;
	}

	&__experiment-type button:hover {
		opacity: 0.8;
	}

	&__experiment-type button:disabled {
		cursor: default;
		opacity: 0.8;
	}
}

@keyframes nab-experiment-type-list__create-animation {

	0%,
	20%,
	50%,
	80% {
		transform: translateY(0);
	}

	30% {
		transform: translateY(-0.5rem);
	}

	100% {
		transform: translateY(0);
	}
}