@use "~admin-stylesheets/colors";
@use "~admin-stylesheets/variables";

.nab-edit-experiment-header {
	align-items: stretch;
	background: colors.$color__background-editor;
	border-bottom: 1px solid colors.$color__border-editor;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	height: variables.$editor-bar-height;
	justify-content: space-between;
	left: 0;
	padding: 8px;
	z-index: 30;

	&__right-promo-button {
		justify-self: flex-end;
		margin-left: auto;
	}

	&__info {
		align-items: center;
		display: flex;
		flex-direction: row;
		min-width: 5em;

		h1 {
			line-height: 1.3;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	&__experiment-icon {
		height: (variables.$editor-bar-height - 16) * 0.8;
		min-width: (variables.$editor-bar-height - 16) * 0.8;
		width: (variables.$editor-bar-height - 16) * 0.8;
	}

	&__settings {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		gap: 12px;
	}

	&__save-button.components-button.is-button,
	&__start-button.components-button.is-button {
		height: 33px;
		line-height: 32px;
		font-size: 13px;
	}

	&__save-button--is-saving,
	&__save-button--has-been-saved {
		color: colors.$color__text-disabled;
		display: flex;
		padding: 0 1.5em;

		svg {
			margin-right: 4px;
		}
	}

	&__save-button--is-saving {
		animation: pulse 500ms infinite;
	}

	&__title {
		margin: 0 0.5em;
		font-weight: 400;
	}
}