.wp-admin {
	overflow-y: scroll;
}

#wpbody-content > .notice:not(.uag-notice),
#wpbody-content > .error {
	display: none !important;
}

.uag-menu-page-wrapper,
.uag-menu-page-wrapper * {
	box-sizing: border-box;
}

.uag-menu-page-wrapper a:focus,
.uag-menu-page-wrapper button:focus,
.uag-menu-page-wrapper input:focus {
	box-shadow: none;
	outline: none;
}

.spectra-admin__dialog {
	z-index: 99999;
}
// This Class Can Be Cleared Before Final Push.
#uag-menu-page .uag-accordion {

	svg {
		fill: $slate-200;
	}

	&:hover {

		svg {
			fill: $slate-600;
		}
	}

	&:focus {
		outline: none;
		box-shadow: none;
	}

	&:focus-visible {

		svg {
			fill: $slate-600;
		}
	}
}

.toplevel_page_spectra #wpcontent {
	padding-left: 0;
}

.uag-menu-page-wrapper .uag-settings-app {
	font-family: var(--heading-font-family);
	left: -20px;
	position: relative;
	width: calc(100% + 20px);
	// Button CSS.
	.uag-normal-button-control {

		.uag-button {
			display: inline-block;
			text-decoration: none;
			font-size: 14px;
			margin: 0;
			font-weight: var(--heading-weight-400);
			font-family: var(--heading-font-family);
			font-style: var(--heading-font-style);
			padding: 10px 16px;
			cursor: pointer;
			-webkit-appearance: none;
			border-radius: 3px;
			white-space: nowrap;
			box-sizing: border-box;
			text-transform: capitalize;
		}

	}

	h2 {
		font-family: var(--heading-font-family);
		font-weight: var(--heading-weight-500);
		font-size: 24px;
		margin-bottom: 20px;
		margin-top: 0;
		color: var(--content-color);
		line-height: 32px;

	}

	h3 {
		margin: 0;
		margin-bottom: 10px;
		color: var(--content-color);
		font-family: var(--heading-font-family);
		font-weight: var(--heading-weight-500);
		font-size: 18px;
		font-style: var(--heading-font-style);
		line-height: 1.3em;
	}

	.uag-field {
		border-radius: 2px;
	}
	// Paragraph CSS.
	p {
		color: var(--content-color);
		font-family: var(--heading-font-family);
		font-weight: var(--heading-weight-400);
		font-size: 14px;
		margin-top: 0;
		margin-bottom: 20px;
		line-height: 1.55em;
		text-align: left;
	}

	.components-base-control__field {
		font-size: 16px;
	}
}

.uag-user-info {
	background: var(--background-light-color);
	padding: 35px 0;
	box-sizing: border-box;
	width: 1200px;
	margin: 0 auto;
	max-width: 100%;

	a[href=""] {
		display: none;
	}
}

.uag-button--primary:hover,
.uag-button--primary:focus,
.uag-button--primary:active {
	background: var(--accent-hv-color);
	color: var(--metabox-background-color);
}

.uag-button--primary {
	border-width: 0;
	border: 1px solid var(--accent-color);
	background: var(--accent-color);
	color: var(--background-light-color);
}

.uag-button--secondary {
	color: var(--accent-color);
	border: 1px solid var(--accent-color);
	background: #fff;
	vertical-align: top;
}

.uag-button--secondary:hover,
.uag-button--secondary:focus,
.uag-button--secondary:active {
	background: #f0f0f1;
	border-color: var(--accent-hv-color);
	color: var(--accent-hv-color);
}

.uag-control__status-yes,
.uag-control__status-enabled {
	display: inline-flex;
	color: #639102;
	align-items: center;
	font-weight: var(--heading-weight-400);
	font-family: var(--heading-font-family);
	font-style: var(--heading-font-style);

	img {
		margin-left: 5px;
		width: 18px;
	}
}

.uag-control__status-no,
.uag-control__status-disabled {
	color: #f00;
	font-weight: var(--heading-weight-400);
	font-family: var(--heading-font-family);
	font-style: var(--heading-font-style);
	display: inline-flex;
	align-items: center;

	img {
		display: none;
	}
}

#wpwrap {
	background-color: $slate-50;

	.spectra-admin {

		&__input-field {
			color: $slate-500;
			background-color: #fff;
			border: 1px solid $slate-200;
			border-radius: 0.375rem;
			padding: 0.5rem 0.75rem;
			font-size: 1rem;
			//stylelint-disable-next-line declaration-property-unit-allowed-list
			line-height: 1.25rem;

			&--read-only {
				border: 1px solid $slate-300 !important;
				background-color: $slate-100 !important;

				&:focus {
					outline: none;
				}
			}

			&:focus {
				outline: none;
				border-color: $slate-400;
				box-shadow: none;

				& + .spectra-admin__input-field--end-display {
					border-color: $slate-400;
					box-shadow: none;
				}
			}
		}

		&__dropdown {
			padding-right: 2rem;

			&:hover {
				color: #2c3338;
			}
		}

		&__block-label {
			box-sizing: content-box;
		}
	}

	// This is required since Tailwind CSS is overridden by load-styles
	.spectra-content-width-input-wrap {

		> input {
			padding: 0.5rem 0 0.5rem 0.75rem;
			border-radius: 0.25rem 0 0 0.25rem;
			border-right-width: 0;
		}

		> span {
			padding: 0.5rem 0.75rem;
			font-size: 1rem;
			//stylelint-disable-next-line declaration-property-unit-allowed-list
			line-height: 1.25rem;
			color: $slate-500;
			background-color: #fff;
			border-radius: 0 0.25rem 0.25rem 0;
			border: 1px solid $slate-200;
		}
	}
}

.uag-font-select-disabled {
	pointer-events: none;
	opacity: 0.4;
}

.uag-menu-page-wrapper {
	font-family: Figtree, sans-serif;

	p:not(.no-line-height) {
		font-size: 14px;
		line-height: 22.4px;
	}

	h2 {
		font-size: 1.8rem;
	}

	h3 {
		font-size: 1.125rem;
	}
}

.spectra-video-container {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;

	.spectra-video {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}
}

// The Block SVGs when Disabled
.spectra-icon-transition {

	svg,
	path,
	rect,
	circle {
		transition-property: stroke;
		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		transition-duration: 150ms;
	}
}

.spectra-disabled-icon {

	svg,
	path,
	rect,
	circle {
		stroke: $slate-400;
	}
}

// Changelog Styling.
.spectra-changelog-description {

	strong {
		font-weight: 500;
		font-size: 0.875rem;
		//stylelint-disable-next-line declaration-property-unit-allowed-list
		line-height: 1.25rem;
		color: #1e293b;
	}

	ul {
		margin-top: 0.25rem;
		margin-bottom: 0.75rem;

		&:last-child {
			margin-top: 0;
		}
	}

	li {
		font-weight: 400;
		font-size: 0.75rem;
		//stylelint-disable-next-line declaration-property-unit-allowed-list
		line-height: 1rem;
		color: #64748b;
	}
}

// This Class Can Be Cleared Before Final Push.
// Custom Scrollbar.
.spectra__scrollable {
	scrollbar-width: 0.5rem;
	scrollbar-color: $slate-300 $slate-100;

	&--blocks {
		scrollbar-width: 0.5rem;
		scrollbar-color: $slate-300 $slate-100;

		&::-webkit-scrollbar {
			width: 0.5rem;
			height: 0.5rem;
		}

		&::-webkit-scrollbar-track {
			margin: 1rem 0;
			border-radius: 0.25rem;
			background-color: $slate-100;
		}

		&::-webkit-scrollbar-thumb {
			border-radius: 0.25rem;
			background-color: $slate-300;
		}
	}

	&--settings {
		// overflow-y: auto;
		overflow-y: scroll;
		scrollbar-width: 0.5rem;
		scrollbar-color: $slate-300 $slate-100;
		// scrollbar-gutter: stable both-edges;

		&::-webkit-scrollbar {
			width: 0.5rem;
			height: 0.5rem;
		}

		&::-webkit-scrollbar-track {
			border-radius: 0 0.5rem 0.5rem 0;
			background-color: $slate-100;
			opacity: 0.4;
		}

		&::-webkit-scrollbar-thumb {
			border-radius: 0.25rem;
			background-color: $slate-300;
			opacity: 0.4;
		}
	}
}

.spectra {

	&__settings {

		& > section:last-child:not(.not-last-child) {
			border-bottom: none;
		}
	}
}

.section-disabled {
	pointer-events: none;
	opacity: 0.4;
}

.uag-dashboard-app {

	.uag-radio-input {
		width: 20px !important;
		height: 20px !important;
		border: 1px solid $slate-300;
		box-shadow: none !important;

		&:checked {
			border-color: $spectra-wpcolor;
			box-shadow: none !important;
			color: $spectra-wpcolor;
		}

		&::before {
			display: none !important;
		}

		&:active,
		&:focus {
			border-color: $spectra-wpcolor;
			color: $spectra-wpcolor;
		}

		&:hover {
			color: $spectra-wpcolor;
		}
	}
}

[dir="rtl"] .uag-dashboard-app button.bg-spectra[aria-checked="false"] span {
	right: 0;
}

[dir="rtl"] .uag-dashboard-app button.bg-spectra[aria-checked="true"] span {
	transform: translateX(20px);
}
.fse-trash-font {
	fill: #ef4444;
	cursor: pointer;
}

.whats-new-rss-flyout-contents {
	font-family: Figtree, sans-serif;
	top: 32px !important;
	height: calc(100% - 32px) !important;
}

.uagb-remove-ring input[type="checkbox"],
.uagb-remove-ring a,
.uagb-remove-ring {
	outline: none;
	--tw-ring-inset: auto;
	box-shadow: unset;
}

.settings-input > {
	input {
		&:hover {
			outline-color: #e5e7eb !important;
		}
	}
}

.uagb-input > {
	input {
		background-color: #f9fafb !important;

		&:hover {
			outline-color: #e5e7eb !important;
		}
	}
}

.uagb-radio-button {
	min-width: 1rem;
	height: 1rem;
	border: 2px solid #9ca3af;
	border-radius: 100%;
	background-color: #fff;
	position: relative;

	&::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		width: 50%;
		height: 50%;
		background-color: rgb(96, 5, 255);
		border-radius: 100%;
		transition: 0.3s;
		scale: 0;
	}
}

.uagb-radio-input {
	&:checked + {
		.uagb-radio-button {
			border: 2px solid #6005ff;

			&::after {
				scale: 1;
			}
		}
	}
}

.size-2\.5 {
	width: 0.625rem;
	height: 0.625rem;
}

.size-3 {
	width: 0.75rem;
	height: 0.75rem;
}

.border-none > input {
	border: none !important;
}

.uagb-settings-sidebar {
	height: 100% !important;
	min-height: 100vh;
	border: none !important;
	border-bottom-right-radius: 12px;
}

.uagb-outline-button {
	border: none !important;
	outline: 1px solid #e5e7eb !important;
	--tw-ring-inset: auto;
	box-shadow: unset;

	:focus {
		border: none !important;
		outline: 1px solid #e5e7eb !important;
	}
}

.regenerate-btn {
	> span {
		display: flex !important;
		align-items: center !important;
		gap: 4px !important;
	}
}

.dashicons-wordpress-alt::before {
	display: block;
	width: 16px !important;
	height: 16px !important;
	font-size: 16px !important;
}

.dropdown-container > * {
	width: 100% !important;
}

.unlock-pro-features-dropdown-container {
	// Empty line before the @media rule.
	@media (max-width: 1300px) and (min-width: 1024px) {
		flex-direction: column;
		gap: 8px;

		> div {
			width: 100% !important;
		}
	}

	@media (max-width: 425px) {
		flex-direction: column;
		gap: 8px;

		> div {
			width: 100% !important;
		}
	}
}

.block-item:hover {
	outline: 1px solid #ece5fd !important;
}

.custom-border {
	border: 1px solid #e5e7eb;
	transition: border-color 0.2s ease-in-out;
}

.custom-border:hover {
	border-color: #6b7280;
}

[data-floating-ui-focusable] {
	z-index: 9999 !important;
}
