TriggerFrontend/src/styles/Select.module.css

.menuSelectRoot {
	width: 45%;
}
.menuSelectWrapper {
	margin-top: 1.75rem !important;
}
.menuSelectLabel {
	position: absolute;
	font-size: .75rem !important;
	padding-left: .5rem;
	padding-right: .5rem;
	padding-top: .125rem;
	padding-bottom: .125rem;
	margin-left: -8px;
	border-radius: 8px;
	background-color: var(--mantine-color-primary-0);
	color: var(--mantine-color-background-0);
	z-index: 1;
	top: 18px;
}
.menuSelectLabelNoOverflow {
	width: inherit;
	position: absolute;
	font-size: .75rem !important;
	padding-left: .5rem;
	padding-right: .5rem;
	padding-top: .125rem;
	padding-bottom: .125rem;
	margin-left: -8px;
	border-radius: 8px;
	background-color: var(--mantine-color-primary-0);
	color: var(--mantine-color-background-0);
	z-index: 1;
	top: 18px;
	overflow: clip;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.menuSelectInput {
	border-color: var(--mantine-color-border-0) !important;
	background-color: var(--mantine-color-background-0) !important;
	color: var(--mantine-color-primary-0) !important;
	&:focus {
		border-color: var(--mantine-color-primary-0) !important;
	}
	display: flex !important;
	overflow: clip !important;
	height: 36px !important;
	&::placeholder {
		color: var(--mantine-color-accent-0) !important;
	}
}

.menuSelectOptions {
	color: var(--mantine-color-primary-0) !important;
}

.menuSelectOption {
	color: var(--mantine-color-primary-0) !important;
	font-size: .875rem !important;
	&[data-checked] {
		background-color: var(--mantine-color-accent-0) !important;
		color: var(--mantine-color-background-0) !important;
		&:hover {
			background-color: var(--mantine-color-accent-0) !important;
			color: var(--mantine-color-background-0) !important;
		}
	}
	&:hover {
		background-color: var(--mantine-color-primary-0) !important;
		color: var(--mantine-color-background-0) !important;
	}
}

.dropdown {
	border: none !important;
	background-color: var(--mantine-color-search-0) !important;
	backdrop-filter: blur(15px) brightness(1.75) !important;
}

.options {
	.option {
		transition: all .1s ease !important;
		color: var(--mantine-color-accent-0);
		font-size: 1.125rem;
		&[data-combobox-selected="true"] {
			background-color: var(--mantine-color-background-0);
		}
		&:hover {
			background-color: var(--mantine-color-background-0);
		}
	}
}

.wrapper {
	display: flex;
	justify-content: center;
	.input {
		border: 0;
		border-bottom: thin solid var(--mantine-color-border-0);
		background-color: transparent;
		color: var(--mantine-color-primary-0);
		font-style: italic;
		font-size: 0.8rem;
		height: 3.5em;
		transition: all 0.4s ease;
		width: 50%;
		padding-left: 1rem;
		padding-right: 1rem;
		text-align: center;
		&[data-active="true"] {
			transition: all 0.4s ease;
			background-color: color-mix(in srgb, var(--mantine-color-search-0), transparent 50%);
			border-color: var(--mantine-color-border-0);
			outline: none;
			color: var(--mantine-color-primary-0);
			font-style: normal;
			font-weight: 500;
			font-size: 1.2rem;
			letter-spacing: .2em;
			width: 100%;
			border-top-left-radius: .25em;
			border-top-right-radius: .25em;
			border-bottom-left-radius: .25em;
			border-bottom-right-radius: .25em;
		}
	}
	.section {
		transition: opacity 0.1s 0s ease;
		color: var(--mantine-color-border-0);
		width: auto;
		padding-left: .5rem;
		opacity: 0;
	}
}
.wrapper:focus-within {
	.input {
		background-color: var(--mantine-color-search-0);
		border-color: var(--mantine-color-border-0);
		outline: none;
		color: var(--mantine-color-primary-0);
		font-style: normal;
		font-weight: 500;
		font-size: 1.2rem;
		letter-spacing: .2em;
		width: 100%;
		border-top-left-radius: .25em;
		border-top-right-radius: .25em;
		border-bottom-left-radius: .25em;
		border-bottom-right-radius: .25em;
		transition: all 0.4s ease;
		&[data-active="true"] {
			transition: all 0.4s ease;
			backdrop-filter: blur(15px) brightness(1.75) !important;
			background-color: var(--mantine-color-search-0);
			border-color: var(--mantine-color-border-0);
			outline: none;
			color: var(--mantine-color-primary-0);
			font-style: normal;
			font-weight: 500;
			font-size: 1.2rem;
			letter-spacing: .2em;
			width: 100%;
			border-top-left-radius: .25em;
			border-top-right-radius: .25em;
			border-bottom-left-radius: .25em;
			border-bottom-right-radius: .25em;
		}
	}
	.section {
		transition: opacity 0.4s 0.4s ease;
		color: var(--mantine-color-border-0);
		width: auto;
		padding-left: .5rem;
		opacity: 1;
	}
}

.searchExample {
	.wrapper {
	display: flex;
	justify-content: center;
	.input {
		border: 0;
		border-bottom: thin solid var(--mantine-color-border-0);
		background-color: transparent;
		font-style: italic;
		font-size: 0.8rem;
		height: 3.5em;
		transition: all 0.4s ease;
		width: 50%;
		padding-left: 1rem;
		padding-right: 1rem;
		text-align: center;
		&[data-active="true"] {
			border-color: var(--mantine-color-border-0);
			outline: none;
			font-style: normal;
			font-weight: 500;
			font-size: 1.2rem;
			letter-spacing: .2em;
			width: 100%;
			border-top-left-radius: .25em;
			border-top-right-radius: .25em;
			border-bottom-left-radius: .25em;
			border-bottom-right-radius: .25em;
		}
	}
	.section {
		transition: opacity 0.1s 0s ease;
		color: var(--mantine-color-border-0);
		width: auto;
		padding-left: .5rem;
		opacity: 0;
	}
}
}