.root {
	border: 1px solid transparent;
	border-radius: var(--mantine-radius-md);
	background-color: var(--mantine-color-slate-7);
	transition: border-color 0.2s;

	@include light {
		background-color: var(--mantine-color-slate-1);
	}

	&[data-with-border] {
		border: 1px solid hsla(253, 21%, 40%, 0.5);
	}

	&[data-active] {
		border-color: var(--mantine-color-surreal-6);
	}

	&:focus-visible {
		outline: none;
		border-color: var(--mantine-color-slate-3);

		&[data-active] {
			border-color: var(--mantine-color-surreal-3);
		}
	}
}

.disabled {
	cursor: not-allowed;
}