@use './global';

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

.ctrl-array {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 0.5rem;

	&__container {
		display: flex;
		position: relative;
		flex-direction: column;
		overflow: hidden;
		border-radius: 0.25rem;
		border-width: 1px;
		border-color: #d1d5db;
		gap: 0.25rem;
		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

		@media (prefers-color-scheme: dark) {
			border-color: #16191d;
		}

		&__title {
			padding: 0 0 0 1rem;
			cursor: pointer;

			display: flex;
			align-items: center;
			justify-content: space-between;

			&:hover {
				background-color: darken(#fff, 2%);

				@media (prefers-color-scheme: dark) {
					background-color: transparentize(lighten(#000, 2%), 0.4);
				}
			}
		}

		&__btn {
			cursor: pointer;
			padding: 0.45rem 0.7rem;
			border-left: 1px solid #d1d5db;

			@media (prefers-color-scheme: dark) {
				border-left-color: #16191d;
			}

			&:hover {
				background-color: rgb(255, 134, 134);
			}

			&__icon {
				font-size: 1rem;
				line-height: 1em;
			}
		}

		&__item-container {
			display: none;
			padding: 1rem;
		}

		&__item {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
			gap: 0.5rem;
		}

		&--open {
			.ctrl-array__container__title {
				border-bottom: 1px solid #d1d5db;

				@media (prefers-color-scheme: dark) {
					border-bottom-color: #16191d;
				}
			}
			.ctrl-array__container__item-container {
				display: block;
			}
		}
	}

	&__section-btn {
		display: flex;
		padding: 0.375rem;
		transition-property: background-color, border-color, color, fill, stroke,
			opacity, box-shadow, transform;
		color: #ffffff;
		justify-content: center;
		align-items: center;
		border-radius: 0.25rem;
		cursor: pointer;
		gap: 0.25rem;
		background-color: #2563eb;

		&:hover {
			background-color: #4479ee;
		}

		&__icon {
			margin-left: 0.25rem;
		}
	}
}

.nitrogen-screen {
	display: flex;
	overflow: hidden;
	align-items: stretch;
	min-height: 100vh;
	min-width: 100%;
	background-color: #c5ccd3;
	font-family: Inter, sans-serif;

	.contexify-item-span {
		margin-right: auto;
	}

	--contexify-zIndex: 1002;
	--contexify-menu-bgColor: #fff;
	--contexify-separator-color: rgba(0, 0, 0, 0.2);
	--contexify-item-color: #333;
	--contexify-activeItem-color: #fff;
	--contexify-activeItem-bgColor: #447aee;
	--contexify-rightSlot-color: #6f6e77;
	--contexify-activeRightSlot-color: #fff;
	--contexify-arrow-color: #6f6e77;
	--contexify-activeArrow-color: #fff;

	@media (prefers-color-scheme: dark) {
		background-color: #16191d;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23383838' fill-opacity='1' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
	}

	kbd {
		border: 2px solid rgba(0, 0, 0, 0.5);
		box-shadow: 2px 2px rgba(0, 0, 0, 0.5);
		font-size: 0.85em;
		line-height: 0.85em;
		display: inline-block;
		font-weight: 600;
		letter-spacing: 0.05em;
		padding: 3px 5px;
		white-space: nowrap;
		margin: 0 0.55em 0 0.5em;
	}

	&__preview-popup {
		position: fixed;
		top: 50%;
		left: 50%;
		width: fit-content;
		height: auto;
		font-size: 24px;
		padding: 30px 50px;
		z-index: 999999999;
		border-radius: 10px;
		transform: translate(-50%, -50%);
		background-color: rgba(50, 50, 63, 0.9);
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		pointer-events: none;

		kbd {
			border-color: rgba(255, 255, 255, 0.5);
			box-shadow: 2px 2px rgba(255, 255, 255, 0.5);
		}

		animation: nitrogen-preview-popup 2s ease-out forwards;

		@keyframes nitrogen-preview-popup {
			0% {
				opacity: 1;
			}
			50% {
				opacity: 1;
			}
			100% {
				opacity: 0;
			}
		}
	}

	.nitrogen-panel {
		font-family: Inter, sans-serif;
		font-size: 0.875rem;
		line-height: 1.25rem;
		width: 100%;
		height: 100%;
		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
			0 2px 4px -1px rgba(0, 0, 0, 0.06);
		z-index: 1200;

		&__header {
			display: flex;
			color: #ffffff;
			font-size: 0.875rem;
			line-height: 1.25rem;
			font-weight: 700;
			justify-content: space-between;
			align-items: center;
			user-select: none;
			background-color: #1146bb;
			padding: 0.5rem;

			&__button {
				padding-left: 0.75rem;
				padding-right: 0.75rem;
				cursor: pointer;
				width: 38px;
			}

			&__title {
				font-family: Inter, sans-serif;
			}

			&__empty-and-lonely-bob {
				width: 38px;
			}
		}

		&__settings {
			display: flex;
			padding: 1.25rem;
			flex-direction: column;
			flex: 1 1 0%;
			color: #000;

			@media (prefers-color-scheme: dark) {
				background-color: #2c333a;
				color: #e2e5e9;
			}

			&__btn {
				@include global.button(large);

				&:hover {
					box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1),
						0 2px 4px -2px rgb(0 0 0 / 0.1);
				}
			}
		}

		&__content {
			height: 100%;
			z-index: 1200;
			background-color: #e6e9ec;

			@media (prefers-color-scheme: dark) {
				background-color: #16191d;
			}

			&__default {
				display: flex;
				padding: 1.25rem;
				flex-direction: column;
				flex: 1 1 0%;
				background-color: #e6e9ec;

				@media (prefers-color-scheme: dark) {
					background-color: #2c333a;
				}

				&__search-modules {
					margin-bottom: 0.75rem;
					grid-column-start: 1;
					grid-column-end: 3;
				}

				&__section-header {
					display: flex;
					margin-top: 0.5rem;
					margin-bottom: 0.5rem;
					font-size: 1.125rem;
					line-height: 1.75rem;
					font-weight: 600;
					justify-content: space-between;
					align-items: center;
					cursor: pointer;
					grid-column-start: 1;
					grid-column-end: 3;

					@media (prefers-color-scheme: dark) {
						color: #e2e5e9;
					}

					div &__icon {
						transition-property: transform;
						transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
						transition-duration: 150ms;
						--tw-rotate: 0;
						transform: translate(var(--tw-translate-x), var(--tw-translate-y))
							rotate(var(--tw-rotate)) skewX(var(--tw-skew-x))
							skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
							scaleY(var(--tw-scale-y));

						&--active {
							--tw-rotate: 90deg;
							transform: translate(var(--tw-translate-x), var(--tw-translate-y))
								rotate(var(--tw-rotate)) skewX(var(--tw-skew-x))
								skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
								scaleY(var(--tw-scale-y));
						}
					}
				}

				&__search-no-results {
					text-align: center;
					grid-column-start: 1;
					grid-column-end: 3;
				}
			}

			.nitrogen-panel__inspector {
				display: flex;
				padding-bottom: 1.25rem;
				flex-direction: column;
				flex: 1 1 0%;
				gap: 0.625rem;
				background-color: #e6e9ec;

				@media (prefers-color-scheme: dark) {
					background-color: #16191d;
					color: #d1d5db;
				}

				&__mod-id {
					opacity: 0.5;
					padding: 0 0.75rem;
					font-size: 0.75rem;

					span {
						user-select: all;
					}
				}

				&__menu {
					display: flex;
					margin-bottom: 0.375rem;
					font-size: 0.75rem;
					line-height: 1rem;
					height: 3.5rem;

					&__button {
						position: relative;
						padding-left: 1.25rem;
						padding-right: 1.25rem;
						background-color: #ffffff;
						transition-property: background-color, border-color, color, fill,
							stroke, opacity, box-shadow, transform;
						color: #6b7280;
						flex: 1 1 0%;
						border-bottom-width: 2px;
						border-color: #ffffff;
						cursor: pointer;

						&--active {
							border-color: #2563eb;
						}

						@media (prefers-color-scheme: dark) {
							background-color: #2c333a;
							border-color: #424c57;
							color: #d1d5db;
						}

						&__content {
							position: absolute;
							top: 0;
							right: 0;
							bottom: 0;
							left: 0;
							background: linear-gradient(#ffffff, #f6f8fe);
							transition-property: opacity;
							opacity: 0.4;

							&--active {
								opacity: 1;
							}

							@media (prefers-color-scheme: dark) {
								background: linear-gradient(180deg, #002a8a, #1a1a1a);
							}

							&__text {
								display: flex;
								position: relative;
								z-index: 10;
								padding-top: 0.25rem;
								padding-bottom: 0.25rem;
								flex-direction: column;
								justify-content: center;
								align-items: center;
								width: 100%;
								height: 100%;
								user-select: none;

								&__icon {
									margin-bottom: -0.25rem;
									font-size: 1.25rem;
									line-height: 1.75rem;
								}
							}
						}
					}
				}

				&__section {
					background-color: #ffffff;

					@media (prefers-color-scheme: dark) {
						background-color: #2c333a;
						color: #ffffff;
					}

					&__header {
						display: flex;
						padding-top: 0.625rem;
						padding-bottom: 0.625rem;
						padding-left: 1.25rem;
						padding-right: 1.25rem;
						font-weight: 700;
						align-items: center;
						cursor: pointer;
						gap: 0.5rem;
						border-bottom-width: 1.5px;
						border-color: #e6e9ec;

						@media (prefers-color-scheme: dark) {
							border-color: #16191d;
						}

						&__icon {
							transition-property: transform;
							--tw-rotate: 0;
							transform: translate(var(--tw-translate-x), var(--tw-translate-y))
								rotate(var(--tw-rotate)) skewX(var(--tw-skew-x))
								skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
								scaleY(var(--tw-scale-y));

							&--active {
								--tw-rotate: 90deg;
								transform: translate(
										var(--tw-translate-x),
										var(--tw-translate-y)
									)
									rotate(var(--tw-rotate)) skewX(var(--tw-skew-x))
									skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
									scaleY(var(--tw-scale-y));
							}
						}
					}

					&__content {
						display: flex;
						flex-direction: column;
						gap: 0.125rem;

						&--hidden {
							display: none;
						}

						&__ctrl-option {
							display: flex;
							padding-left: 1.25rem;
							padding-right: 1.25rem;
							padding-top: 0.5rem;
							padding-bottom: 1rem;
							flex-wrap: wrap;
							justify-content: space-between;
							align-items: center;
							gap: 0.5rem;

							&--divider {
								padding-bottom: 2rem;
								margin-bottom: 1.25rem;
								border-bottom-width: 2px;
								border-color: #e6e9ec;
							}

							&__label {
								display: flex;
								align-items: stretch;
								gap: 0.25rem;
							}
						}
					}
				}
			}
		}

		&__footer {
			display: flex;
			position: relative;
			padding: 0.5rem;
			justify-content: flex-end;
			align-items: center;
			border-top-width: 2px;
			border-color: #c5ccd3;
			gap: 1rem;
			z-index: 1200;
			background-color: #e6e9ec;

			@media (prefers-color-scheme: dark) {
				background-color: #2c333a;
				border-color: #424c57;
			}

			&__btn {
				transition-property: background-color, border-color, color, fill, stroke,
					opacity, box-shadow, transform;
				transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
				transition-duration: 300ms;
				cursor: pointer;
				color: #424c57;

				&:hover {
					color: #16191d;
				}

				&--settings {
					flex: 1;
					margin-left: 5px;
				}

				@media (prefers-color-scheme: dark) {
					color: #c5ccd3;

					&:hover {
						color: #e2e5e9;
					}
				}
			}

			&__save-btn {
				// padding-top: 0.375rem;
				// padding-bottom: 0.375rem;
				// padding-left: 1.25rem;
				// padding-right: 1.25rem;
				// transition-property: background-color, border-color, color, fill, stroke,
				// 	opacity, box-shadow, transform;
				// color: #ffffff;
				// font-size: 0.75rem;
				// line-height: 1rem;
				// letter-spacing: 0.025em;
				// border-radius: 9999px;
				// cursor: pointer;

				// background-color: #2563eb;

				// &:hover {
				// 	background-color: #4479ee;
				// }

				// @media (prefers-color-scheme: dark) {
				// 	background-color: #1558ea;
				// 	color: #e2e5e9;

				// 	&:hover {
				// 		background-color: #1146bb;
				// 	}
				// }

				// &--disabled {
				// 	cursor: not-allowed;
				// 	opacity: 0.5;
				// }

				@include global.button(small);
				display: inline-block;

				&__spinner {
					margin-left: -0.5rem;
					margin-right: -0.5rem;
					opacity: 0;
					transition-property: all;

					&--saving {
						margin-right: 0.5rem;
						opacity: 1;
					}
				}
			}
		}
	}

	&__page-container {
		display: flex;
		flex-direction: column;
		flex: 1 1 0%;
		width: 100%;
		padding-top: 36px;

		&__top-bar {
			display: flex;
			position: fixed;
			top: 0;
			z-index: 10;
			padding-left: 1.25rem;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			gap: 1.25rem;
			box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
				0 2px 4px -1px rgba(0, 0, 0, 0.06);
			backdrop-filter: blur(8px);
			background-color: #e6e9ec;

			@media (prefers-color-scheme: dark) {
				background-color: #21262b;
			}

			.responsive-widget-background {
				background-color: transparent;

				@media (prefers-color-scheme: dark) {
					color: #ffffff;
				}
			}

			.page-title-wrapper {
				display: flex;
				flex-direction: row;
				align-items: center;
				font-size: 0.875rem;
				line-height: 1.25rem;
				color: black;

				@media (prefers-color-scheme: dark) {
					color: #ffffff;
				}

				span {
					padding-right: 0.5rem;
					opacity: 0.7;
				}
			}
			&__page-title[type='text'] {
				display: block;
				font-size: 0.875rem;
				line-height: 1.25rem;
				border-width: 0;
				border-left-width: 1px;
				border-color: #d1d5db;
				color: rgb(66, 76, 87);
				&:focus {
					border-color: #739bf2;
					--tw-ring-color: #a2bcf6;
					--tw-ring-opacity: 0.5;
					box-shadow: var(--tw-ring-inset) 0 0 0
						calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
				}

				@media (prefers-color-scheme: dark) {
					border-color: #2c333a;
					background-color: #16191d;
					color: #e2e5e9;

					&:focus {
						border-color: #2563eb;
						--tw-ring-color: #2563eb;
					}
				}
			}
		}

		&__simple-bar {
			overflow: auto;
			transition-property: width, min-width, max-width;
			transition-duration: 100ms;
			width: 100%;
			height: 100%;
			box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
				0 4px 6px -2px rgba(0, 0, 0, 0.05);

			&
				> .simplebar-wrapper
				> .simplebar-mask
				> .simplebar-offset
				> .simplebar-content-wrapper
				> .simplebar-content {
				height: 100%;
			}

			&--desktop {
				max-width: 100%;
			}

			&--laptop {
				max-width: 64rem;
			}

			&--tablet {
				max-width: 48rem;
			}

			&--mobile-landscape {
				max-width: 640px;
			}

			&--mobile-portrait {
				max-width: 375px;
			}

			&--is-previewing {
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				width: 100%;
				max-width: 100%;
				z-index: 9999999;
				padding: 0;
				margin: 0;
			}

			.i-frame-container {
				width: 100%;
				height: 100%;
				background-color: #ffffff;

				&--desktop {
					min-width: 1280px;
				}

				&--laptop {
					min-width: 1024px;
				}

				&--tablet {
					min-width: 768px;
				}

				&--mobile-landscape {
					min-width: 640px;
				}

				&--mobile-portrait {
					min-width: 375px;
				}
			}
		}
	}
}

#nitrogen-inspector {
	font-family: Inter, sans-serif;

	.nitrogen-panel__content__default__input-group {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: white;
		border-radius: 4px;
		height: 38px;
		margin-top: 0.25rem;
		padding: 0.5rem 0.75rem;
		font-size: 0.875rem;
		line-height: 1.25rem;
		border-radius: 0.375rem;
		border: 1px solid #d1d5db;
		box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);

		@media (prefers-color-scheme: dark) {
			border-color: #16191d;
			background-color: #16191d;
			color: #fff;

			&:focus {
				border-color: #2563eb;
				--tw-ring-color: #2563eb;
			}
		}

		.nitrogen-panel__content__default__search-modules {
			display: block;
			margin: 0;
			padding: 0;
			width: 100%;
			height: 36px;
			font-size: 0.875rem;
			line-height: 1.25rem;
			border: none;
			border-radius: 0;
			box-shadow: unset;

			&:focus {
				box-shadow: unset;
			}
		}

		.nitrogen-panel__content__default__clear-search {
			padding-left: 0.75rem;
		}
	}

	.cards-container {
		display: grid;
		grid-auto-rows: min-content;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.5rem;
		overflow: hidden;
		transition-property: all;
		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		transition-duration: 150ms;

		&.is-open {
			padding-bottom: 0.75rem;
		}

		&:hover {
			.card-border {
				opacity: 1;
			}
		}

		.card-container {
			position: relative;
			height: 6rem;
			cursor: pointer;
			border-radius: 0.375rem;
			background-color: rgb(255 255 255 / 0.2);
			padding: 0.125rem;
			text-align: center;
			transition-property: all;
			transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
			transition-duration: 150ms;

			&:hover {
				--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1),
					0 2px 4px -2px rgb(0 0 0 / 0.1);
				box-shadow: var(--tw-shadow);
				color: #000;
				@media (prefers-color-scheme: dark) {
					color: hsl(221, 83%, 75%);
				}
			}

			@media (prefers-color-scheme: dark) {
				background-color: rgb(226 229 233 / 0.2);
				color: rgb(168 178 189 / 1);
			}

			.card-border {
				background: radial-gradient(
					400px circle at var(--mouse-x) var(--mouse-y),
					rgba(109, 155, 255, 0.37),
					transparent 40%
				);
				@media (prefers-color-scheme: dark) {
					background: radial-gradient(
						400px circle at var(--mouse-x) var(--mouse-y),
						rgba(131, 169, 250, 0.33),
						transparent 40%
					);
				}
				z-index: 1;
			}

			.card-content {
				border-radius: inherit;
				position: relative;

				display: flex;
				flex-direction: column;
				height: 100%;
				align-items: center;
				justify-content: center;
				gap: 0.25rem;
				padding: 0.5rem;
				background: white;

				i {
					font-size: 1.875rem;
					line-height: 2.25rem;
				}

				@media (prefers-color-scheme: dark) {
					background-color: rgb(66 76 87 / 1);
				}

				z-index: 2;
			}

			&:hover:before {
				opacity: 1;
			}
		}

		.card-container:before,
		.card-border {
			content: '';
			background: radial-gradient(
				500px circle at var(--mouse-x) var(--mouse-y),
				hsla(221, 92%, 93%, 0.15),
				transparent 40%
			);
			@media (prefers-color-scheme: dark) {
				background: radial-gradient(
					500px circle at var(--mouse-x) var(--mouse-y),
					rgba(255, 255, 255, 0.06),
					transparent 40%
				);
			}
			border-radius: inherit;
			position: absolute;
			height: 100%;
			left: 0;
			top: 0;
			width: 100%;
			opacity: 0;
			transition-property: opacity;
			transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
			transition-duration: 150ms;
			z-index: 3;
		}
	}

	[type='text'],
	[type='email'],
	[type='url'],
	[type='password'],
	[type='number'],
	[type='date'],
	[type='datetime-local'],
	[type='month'],
	[type='search'],
	[type='tel'],
	[type='time'],
	[type='week'],
	[multiple],
	textarea,
	select {
		@include global.input();
	}

	[type='file'] {
		display: block;
		overflow: hidden;
		padding-top: 0.25rem;
		padding-bottom: 0.25rem;
		padding-left: 0.5rem;
		padding-right: 0.5rem;
		margin: 0;
		background-clip: padding-box;
		background-color: #ffffff;
		transition-property: background-color, border-color, color, fill, stroke,
			opacity, box-shadow, transform;
		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		color: #374151;
		font-size: 0.875rem;
		line-height: 1.25rem;
		font-weight: 400;
		width: 100%;
		border-radius: 0.375rem;
		border-width: 1px;
		border-color: #d1d5db;
		border-style: solid;
		cursor: pointer;

		&:focus {
			--tw-bg-opacity: 1;
			background-color: rgb(255 255 255 / var(--tw-bg-opacity));
			--tw-text-opacity: 1;
			color: rgb(64 64 64 / var(--tw-text-opacity));
			outline: 2px solid transparent;
			outline-offset: 2px;
			border-color: #1146bb;
		}
	}

	[type='file']::file-selector-button {
		padding: 0.375rem 0.75rem;
		margin: -0.375rem -0.75rem;
		margin-inline-end: 0.75rem;
		color: #212529;
		background-color: #e9ecef;
		pointer-events: none;
		border-color: inherit;
		border-style: solid;
		border-width: 0;
		border-inline-end-width: 1px;
		border-radius: 0;
		transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
			border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	}
	[type='file']::-webkit-file-upload-button {
		padding: 0.375rem 0.75rem;
		margin: -0.375rem -0.75rem;
		margin-inline-end: 0.75rem;
		color: #374151;
		background-color: #f3f4f6;
		pointer-events: none;
		border-color: inherit;
		border-style: solid;
		border-width: 0;
		border-inline-end-width: 1px;
		border-radius: 0;
		-webkit-transition: color 0.15s ease-in-out,
			background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
			box-shadow 0.15s ease-in-out;
		transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
			border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	}

	select {
		cursor: pointer;
	}

	checkbox {
		border-radius: 0.25rem;
		border-color: #d1d5db;
		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
		color: #1146bb;

		:focus {
			--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
				var(--tw-ring-offset-width) var(--tw-ring-offset-color);
			--tw-ring-shadow: var(--tw-ring-inset) 0 0 0
				calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
			box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
				var(--tw-shadow, 0 0 #0000);
			--tw-ring-opacity: 0.5;
			--tw-ring-offset-width: 0px;
			border-color: #739bf2;
		}
	}

	@media (prefers-color-scheme: dark) {
		[type='text'],
		[type='email'],
		[type='url'],
		[type='password'],
		[type='number'],
		[type='date'],
		[type='datetime-local'],
		[type='month'],
		[type='search'],
		[type='tel'],
		[type='time'],
		[type='week'],
		[multiple],
		textarea,
		select {
			display: block;
			margin-top: 0.25rem;
			font-size: 0.875rem;
			line-height: 1.25rem;
			border-radius: 0.375rem;
			border-color: #1f2937;
			box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
			background-color: #16191d;
			color: #e2e5e9;

			&:focus {
				--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
					var(--tw-ring-offset-width) var(--tw-ring-offset-color);
				--tw-ring-shadow: var(--tw-ring-inset) 0 0 0
					calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
				box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
					var(--tw-shadow, 0 0 #0000);
				--tw-ring-opacity: 0.5;
				--tw-ring-color: #a2bcf6;
				border-color: #739bf2;
			}
		}

		[type='file'] {
			display: block;
			overflow: hidden;
			padding-top: 0.25rem;
			padding-bottom: 0.25rem;
			padding-left: 0.5rem;
			padding-right: 0.5rem;
			margin: 0;
			background-clip: padding-box;
			transition-property: background-color, border-color, color, fill, stroke,
				opacity, box-shadow, transform;
			transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
			font-size: 0.875rem;
			line-height: 1.25rem;
			font-weight: 400;
			width: 100%;
			border-radius: 0.375rem;
			border-width: 1px;
			border-color: #d1d5db;
			border-style: solid;
			cursor: pointer;
			background-color: #16191d;
			color: #e2e5e9;

			&:focus {
				--tw-bg-opacity: 1;
				background-color: rgb(255 255 255 / var(--tw-bg-opacity));
				--tw-text-opacity: 1;
				color: rgb(64 64 64 / var(--tw-text-opacity));
				outline: 2px solid transparent;
				outline-offset: 2px;
				border-color: #1146bb;
			}
		}

		[type='file']::file-selector-button {
			padding: 0.375rem 0.75rem;
			margin: -0.375rem -0.75rem;
			margin-inline-end: 0.75rem;
			color: #e9ecef;
			background-color: #212529;
			pointer-events: none;
			border-color: inherit;
			border-style: solid;
			border-width: 0;
			border-inline-end-width: 1px;
			border-radius: 0;
			transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
				border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
		}

		[type='file']::-webkit-file-upload-button {
			padding: 0.375rem 0.75rem;
			margin: -0.375rem -0.75rem;
			margin-inline-end: 0.75rem;
			color: #f3f4f6;
			background-color: #374151;
			pointer-events: none;
			border-color: inherit;
			border-style: solid;
			border-width: 0;
			border-inline-end-width: 1px;
			border-radius: 0;
			-webkit-transition: color 0.15s ease-in-out,
				background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
				box-shadow 0.15s ease-in-out;
			transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
				border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
		}

		checkbox {
			border-radius: 0.25rem;
			border-color: #d1d5db;
			box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
			color: #1146bb;

			&:focus {
				--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
					var(--tw-ring-offset-width) var(--tw-ring-offset-color);
				--tw-ring-shadow: var(--tw-ring-inset) 0 0 0
					calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
				box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
					var(--tw-shadow, 0 0 #0000);
				--tw-ring-opacity: 0.5;
				--tw-ring-offset-width: 0px;
				--tw-ring-color: #a2bcf6;
				border-color: #739bf2;
			}
		}
	}
}

@mixin thanks-elementor {
	align-items: normal;
	align-self: auto;
	background-attachment: scroll;
	background-clip: border-box;
	background-color: rgba(0, 0, 0, 0);
	background-image: repeating-linear-gradient(
		125deg,
		rgba(0, 0, 0, 0.1) 1px,
		rgba(0, 0, 0, 0.1) 2px,
		rgba(0, 0, 0, 0) 3px,
		rgba(0, 0, 0, 0) 10px
	);
	background-origin: padding-box;
	background-position-x: 0%;
	background-position-y: 0%;
	background-repeat: repeat;
	background-size: auto;
	border: 1px solid rgba(0, 0, 0, 0.1);
	color: rgb(100, 103, 108, 0.6);
	column-gap: normal;
	display: flex;
	justify-content: normal;
	margin-block-end: 0px;
	margin-bottom: 0px;
	position: relative;
	text-align: start;
	row-gap: normal;
	user-select: none;
}

section.nitrogen-page-wrapper {
	&.nitrogen-previewing {
		.hide {
			@media (max-width: 639px) {
				display: none;
			}

			&-mobileLandscape {
				@media (min-width: 640px) and (max-width: 767px) {
					display: none;
				}
			}
			&-tablet {
				@media (min-width: 768px) and (max-width: 1023px) {
					display: none;
				}
			}
			&-laptop {
				@media (min-width: 1024px) and (max-width: 1279px) {
					display: none;
				}
			}
			&-desktop {
				@media (min-width: 1280px) {
					display: none;
				}
			}
		}
	}

	&:not(.nitrogen-previewing) {
		.hide {
			@media (max-width: 639px) {
				@include thanks-elementor;
			}

			&-mobileLandscape {
				@media (min-width: 640px) and (max-width: 767px) {
					@include thanks-elementor;
				}
			}
			&-tablet {
				@media (min-width: 768px) and (max-width: 1023px) {
					@include thanks-elementor;
				}
			}
			&-laptop {
				@media (min-width: 1024px) and (max-width: 1279px) {
					@include thanks-elementor;
				}
			}
			&-desktop {
				@media (min-width: 1280px) {
					@include thanks-elementor;
				}
			}
		}
	}
}