/* SideSlider */
.wrapper {
	height: 40px;
	padding: 2px 14px 2px 2px;

	border-radius: 4px;

	&:focus-within {
		border-color: var(--mantine-color-purple);
	}

	background-color: light-dark(var(--mantine-color-background-0), var(--mantine-color-background-4));
	border: light-dark(1px solid var(--mantine-color-border-0), 1px solid var(--mantine-color-border-1));
}

.button {
	font-weight: 400;
	padding: 2px;
	height: 20px;
	border-radius: 4px;

	background-color: light-dark(var(--mantine-color-background-0), var(--mantine-color-background-4));
	color: light-dark(var(--mantine-color-text-1), var(--mantine-color-text-0));
}

.italic {
	height: 40px;
	width: 40px;
	padding: 0;

	border-radius: 4px;

	background-color: light-dark(var(--mantine-color-background-0), var(--mantine-color-background-4));
	border: light-dark(1px solid var(--mantine-color-border-0), 1px solid var(--mantine-color-border-1));

	&:disabled {
		background-color: light-dark(var(--mantine-color-background-2), var(--mantine-color-background-3));
		border-color: light-dark(var(--mantine-color-border-2), var(--mantine-color-border-3));
		color: light-dark(var(--mantine-color-text-2), var(--mantine-color-text-3));
	}

	&:focus-within {
		border-color: var(--mantine-color-purple-0);
	}

	&[data-active="true"] {
		background-color: var(--mantine-color-purple-hover);
	}
}
