@use "~admin-stylesheets/colors";

.nab-google-analytics-data-setting {

	&__property {
		margin-left: calc(
			var(--checkbox-input-size, 0) + var(--checkbox-input-spacing, 0)
		);
		margin-top: 1rem;

		label {
			display: block;
		}
	}

	label:not([for="nab-google-analytics-data-setting"]) {
		text-transform: none;
		font-size: inherit;
		font-weight: inherit;
	}

	.components-text-control__input {
		border-radius: 4px;
		border: 1px solid colors.$nab-border;
		max-width: 20em;
		resize: vertical;
	}

	&__connection {
		margin: 1.5em 0;

		&__overlay {
			background: colors.$nab-background-black-translucent;
			bottom: 0;
			display: flex;
			height: 100vh;
			left: 0;
			position: fixed;
			right: 0;
			top: 0;
			width: 100vw;
			z-index: 9999999;
		}

		&__overlay-content {
			align-self: center;
			color: colors.$nab-text-inverted;
			font-size: 1.4em;
			margin: 0 auto;
			padding: 2rem;
		}

		&__selector {
			max-width: 20em;
		}

		.components-base-control__help {
			font-size: 13px;
			margin-bottom: 1em;
		}
	}
}