@use "~admin-stylesheets/colors";

#wpbody .description {
	color: colors.$nab-text-dark-grey;
	font-size: 13px;

	> * {
		color: colors.$nab-text-dark-grey;
		font-size: 13px;
	}
}

.nab-settings-form {

	h2 {
		margin-bottom: 0;
		padding-bottom: 0;

		&:not(:first-child) {
			margin-top: 3em;
		}
	}

	table {
		margin-left: 2em;
		width: calc(100% - 2em);
	}

	.nelio-ab-testing-help {
		margin-top: 3px;
	}

	code {
		background: none;
		color: colors.$nab-text-green;
		margin: 0;
		padding: 0;
	}

	.nab-premium-feature-wrapper {

		.nab-premium-feature {
			padding: 2px 6px 2px 2px;
			margin: 0;
			border-radius: 4px;
			text-transform: capitalize;
			gap: 0;
			border: 1px solid currentcolor;

			.dashicon {
				font-size: 12px;
				padding: 0;
				width: 1.2em;
			}
		}
	}

	.nab-dynamic-setting-loader {
		width: 18px;
		height: 18px;
		border: 2px solid colors.$nab-border-light;
		border-bottom-color: colors.$wp-admin-theme-color;
		border-right-color: colors.$wp-admin-theme-color;
		border-radius: 50%;
		display: inline-block;
		box-sizing: border-box;
		animation: nab-dynamic-setting-loader-rotation 1s linear infinite;
		margin-left: 2em;
		margin-top: 5px;
	}

	@keyframes nab-dynamic-setting-loader-rotation {

		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	/*
 	 * ========================
 	 * MODERNIZE OLD COMPONENTS
 	 * ========================
 	 */

	&,
	.nab-modern-checkbox,
	.components-checkbox-control {
		--checkbox-input-size: 20px !important;
		--checkbox-input-spacing: 12px !important;
	}

	.components-checkbox-control__input-container {
		min-width: var(--checkbox-input-size);
		margin-right: var(--checkbox-input-spacing) !important;
	}

	.nab-modern-checkbox {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
			Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
		font-size: 13px !important;

		&:has(input[type="checkbox"]:disabled) {
			opacity: 0.6;
		}
	}

	.components-base-control {
		margin-bottom: 1em;
	}

	.components-checkbox-control__input-container:has(
			input[type="checkbox"]:disabled
		)
		+ label {
		opacity: 0.4 !important;
	}

	input[type="checkbox"]:disabled {
		filter: saturate(0) !important;
		opacity: 1 !important;

		&:checked {
			opacity: 0.4 !important;
		}
	}

	input[type="range"] {
		margin-top: 6px;
		accent-color: colors.$wp-components-color-accent;
	}

	input[type="text"] {
		max-width: 20em;
	}

	textarea {
		max-width: 30rem;
		min-height: 7rem;
		width: 100%;
	}

	input[type="text"],
	textarea {
		width: 100%;
		display: block;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
			Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
		padding: 6px 8px;
		box-shadow: transparent 0 0 0;
		border-radius: 2px;
		border: 1px solid
			var(--wp-components-color-gray-600, colors.$nab-border);
		font-size: 13px;
		line-height: normal;

		&:focus {
			border-color: colors.$wp-components-color-accent;
			box-shadow: 0 0 0 calc(1.5px - 1px)
				colors.$wp-components-color-accent;
			outline: transparent solid 2px;
		}
	}

	.components-select-control {
		max-width: 20em;
	}
}