.default {
	&.root {
		.wrapper {
			display: flex;
			justify-content: center;
			.input {
				width: 100%;
				border: none;
				background-color: var(--mantine-color-search-0);
				color: var(--mantine-color-primary-0);
				font-size: 1.125rem;
			}
			.section {
				color: var(--mantine-color-border-0);
				width: auto;
				padding-left: .5rem;
				opacity: 1;
			}
			::placeholder {
				color: var(--mantine-color-accent-0);
				opacity: 50%;
			}
		}
	}
}

.settingsItem {
	&.root {
		padding-top: 1rem;
		.label {
			position: relative;
			font-size: .75rem;
			padding-left: .5rem;
			padding-right: .5rem;
			padding-top: .125rem;
			padding-bottom: .125rem;
			margin-left: -8px;
			margin-bottom: 8px;
			border-radius: 8px;
			background-color: var(--mantine-color-primary-0);
			color: var(--mantine-color-background-0);
			z-index: 1;
		}
		.wrapper {
			display: flex;
			background-color: var(--mantine-color-search-0);
			margin-top: -16px;
			padding-top: 8px;
			border-radius: 4px;
			.input {
				width: 100%;
				border: none;
				background-color: transparent;
				color: var(--mantine-color-primary-0);
				font-size: 1.125rem;
			}
			.section {
				color: var(--mantine-color-border-0);
				width: auto;
				padding-left: .5rem;
				opacity: 1;
			}
			::placeholder {
				color: var(--mantine-color-accent-0);
				opacity: 50%;
			}
		}
	}
}

.colorSwatchInput {
	&.root {
		padding-top: 0px;
		.label {
			position: relative;
			font-size: .75rem;
			padding-left: .5rem;
			padding-right: .5rem;
			padding-top: .125rem;
			padding-bottom: .125rem;
			margin-left: -8px;
			margin-bottom: 8px;
			border-radius: 8px;
			background-color: var(--mantine-color-primary-0);
			color: var(--mantine-color-background-0);
			z-index: 1;
		}
		.wrapper {
			display: flex;
			margin-top: -16px;
			border-radius: 4px;
			.input {
				border: none;
				background-color: var(--mantine-color-background-0);
				color: var(--mantine-color-primary-0);
				font-size: 1.125rem;
			}
			.section {
				color: var(--mantine-color-border-0);
				padding-left: .5rem;
				opacity: 1;
			}
			::placeholder {
				color: var(--mantine-color-accent-0);
				opacity: 50%;
			}
		}
	}
}