.ngt-width-limiter {
	max-width: 1100px;
	margin-right: auto;
	margin-left: auto;
}

.ngt-full-width {

	margin-left: -10px !important;

	@media only screen and (min-width: 783px) {
		margin-right: -20px !important;
		margin-left: -22px !important;
	}
}

.wrap--nextgenthemes {

	--ngt-settings-bg:
		oklch(
			from var(--ngt-wp-body-bg)
			calc(l + 0.022)
			c
			h
		);

	.nav-tab {
		font-weight: 500;
		cursor: pointer;
	}

	.nav-tab-active,
	.ngt-settings-bg {
		background-color: var(--ngt-settings-bg);
		border-bottom-color: var(--ngt-settings-bg);
	}

	.ngt-settings-bg {
		padding: 1rem 0 1rem 1rem;
		border-bottom: 1px solid #c3c4c7;
	}

	a {
		text-underline-offset: 2px;
	}

	.ngt-label-wrap {
		display: block;

		a {
			display: none;
		}
	}

	[hidden] {
		/* this is needed, otherwise buttons with hidden attribute are visible */
		display: none !important;
	}
}

.ngt-settings-grid {
	display: grid;
	grid-template-areas:
		"content"
		"sidebar";

	@media (min-width: 750px) {

		& {
			grid-template-areas: "content sidebar";
			grid-template-columns: minmax(300px, 1fr) 300px;
			grid-column-gap: 2rem;
		}
	}

	@media (min-width: 1200px) {

		& {
			grid-template-columns: minmax(300px, 1fr) 420px;
			grid-column-gap: 3rem;
		}
	}
}

.ngt-settings-grid__content {
	grid-area: content;
	padding-right: 5px;
}

.ngt-settings-grid__sidebar {
	grid-area: sidebar;
}

.ngt-sidebar-box {
	padding: 1rem 1rem .5rem;
	margin-top: 1rem;
	margin-bottom: 1rem;
	background: #fff;
	border-left: 4px solid hsl(125.5deg, 44%, 49%);
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1);

	h3:first-child {
		margin-top: 0;
	}

	ul {
		padding-left: 1em;
		list-style: square;
	}

	li {
		padding-left: 0;
		margin-bottom: .5em;
	}

	h5 {
		margin-bottom: .5em;
	}

	@media (min-width: 1200px) {

		& {
			padding: 2rem 3rem 1.5rem;
		}
	}
}

.ngt-opt {
	container-type: inline-size;

	select {
		width: 130px;
	}

	[type="number"] {
		width: 6em;
	}

	> div {
		margin-block-start: 1em;
		margin-block-end: 1em;
	}
}

input.text-large--ngt-key { /* stylelint-disable-line selector-no-qualifying-type */
	width: 21em;

	/* https://github.com/twbs/bootstrap/blob/72d3b6efc4b92e83a4abca6f5bc0cd7e6fd25931/scss/_variables.scss#L607C31-L607C115 */
	font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.ngt-label-wrap {
	display: flex;
	column-gap: .5em;
	margin-bottom: .3em;
	font-weight: 600;

	[type="checkbox"] + & {
		display: inline;
	}

	a {
		--blue: oklch(53% .12 247.74deg);
		--red: oklch(53% .19 21.07deg);
		color: transparent;
		text-decoration: underline var(--blue) 1px;
		text-underline-offset: 2px;

		background-image:
			linear-gradient(
				90deg,
				var(--blue) 0%,
				var(--red) 100%
			);
		background-clip: text;
		transition: text-decoration .2s ease-in-out;

		&:focus,
		&:hover {
			text-decoration: underline var(--blue) 3px;
		}
	}
}

input[type="checkbox"]:has(+ .ngt-label-wrap) { /* stylelint-disable-line selector-no-qualifying-type */
	margin-top: -3px;
}

.ngt-opt--arve-lightbox_aspect_ratio,
.ngt-opt--arve-aspect_ratio,
.ngt-opt--arve-sticky_gap,
.ngt-opt--arve-sticky_width,
.ngt-opt--arve-sticky_max_width {

	.large-text {
		max-width: 6em;
	}
}