@use "~admin-stylesheets/colors";

.nelio-ab-testing-chatbot {
	background: colors.$nab-background-white;
	display: flex;
	flex-direction: column;
	width: min(25em, calc(100vw - 3em));
	height: min(35em, calc(100vh - 3em));

	&-wrapper > * {
		overflow: hidden !important;
	}

	&__header {
		align-items: center;
		justify-content: space-between;
		background: colors.$wp-admin-theme-color;
		color: colors.$nab-text-inverted;
		display: flex;
		padding: 0.5em;
		gap: 0.5em;
		flex-grow: 0;
		flex-shrink: 0;
	}

	&__actions {
		display: flex;
		gap: 0.5em;
	}

	&__button {
		background: colors.$nab-background-white;
		border: none;
		border-radius: 5px;
		cursor: pointer;
		width: 1em;
		height: 1em;
		font-size: 28px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	&__title {
		font-size: 1.2em;
		font-weight: 600;
		padding-left: 0.5em;
	}

	&__content {
		position: relative;
		flex-grow: 1;

		&-loader {
			background: colors.$nab-background-white;
			height: 100%;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		iframe {
			height: 100%;
			width: 100%;
		}
	}
}