[data-scope='number-input'][data-part='root'] {
	@apply flex flex-col gap-2 w-full max-w-xs mx-auto;
}

[data-scope='number-input'][data-part='label'] {
	@apply text-sm font-medium text-foreground;
}

[data-scope='number-input'][data-part='root'] > div {
	@apply relative rounded-md border border-border bg-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-background transition-all;
}

[data-scope='number-input'][data-part='input'] {
	@apply w-full px-3 py-2 pr-12 bg-transparent border-0 rounded-md text-sm text-center text-foreground focus:outline-none;
}

[data-scope='number-input'][data-part='root'] > div > div {
	@apply absolute right-0 top-0 bottom-0 flex flex-col border-l border-border;
}

[data-scope='number-input'][data-part='increment-trigger'],
[data-scope='number-input'][data-part='decrement-trigger'] {
	@apply flex items-center justify-center w-8 flex-1 bg-transparent hover:bg-muted transition-colors focus:outline-none;
}

[data-scope='number-input'][data-part='increment-trigger'] {
	@apply rounded-tr-md border-b border-border/50;
}

[data-scope='number-input'][data-part='decrement-trigger'] {
	@apply rounded-br-md;
}

[data-scope='number-input'][data-part='increment-trigger'] svg,
[data-scope='number-input'][data-part='decrement-trigger'] svg {
	@apply w-3 h-3 text-muted-foreground;
}

[data-scope='number-input'][data-part='increment-trigger']:hover svg,
[data-scope='number-input'][data-part='decrement-trigger']:hover svg {
	@apply text-foreground;
}
