@use "~admin-stylesheets/colors";

.nab-css-selector-finder {
	border: none;
	height: 100%;
	width: 100%;

	max-height: calc(100% - 32px);
	max-width: calc(100% - 32px);

	.components-modal__header > button {
		display: none;
	}

	.components-modal__content > div:last-child {
		height: 100%;
		width: 100%;
	}

	.components-modal__content::before,
	.components-modal__content::after {
		display: none;
	}

	&__header,
	&__header-left,
	&__header-center,
	&__header-right {
		align-items: center;
		display: flex;
		flex-direction: row;
		gap: 5px;
	}

	&__header {
		font-weight: 400;
		width: 100%;
	}

	&__header-left {
		flex-grow: 0;

		select {
			padding-right: 2em;
		}
	}

	&__header-center {
		flex-grow: 1;
		justify-content: center;
		margin: 0 0.5em;
	}

	&__header-right {
		flex-grow: 0;
	}

	&__value {
		margin-right: 6px;
		max-width: 50em;
		width: 100%;
		position: relative;

		.components-base-control__help {
			align-items: center;
			background: colors.$nab-background-white;
			color: colors.$nab-text-red;
			display: flex;
			height: calc(100% - 4px);
			margin: 0;
			padding: 0 5px;
			position: absolute;
			right: 3px;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	&__action {
		align-items: center;
	}

	&__iframe {
		height: 100%;
		width: 100%;
		flex-grow: 1;
	}

	.components-modal__content {
		display: flex;
		flex-direction: column;
		padding: 0;

		.components-modal__header .components-modal__header-heading {
			width: 100%;
		}
	}

	.components-base-control .components-base-control__field {
		margin: 0;
	}
}