/**
$categories map will have state specific inner maps.
**/
$categories: (
	"fill": (
		"background": var(--color-input-default),
		"hover": var(--color-input-default-hover)
	),
	"transparent": (
		"background": transparent,
		"hover": var(--color-surface-default-hover)
	),
	"outline": (
		"background": transparent,
		"hover": var(--color-surface-default-hover)
	)
);

/**
$sizes map will have state specific inner maps.
**/
$sizes: (
	"medium": (
		"main-height": 36px,
		"height": 34px,
		"loader": 24px,
		"maxlength": -38px
	),
	"small": (
		"main-height": 28px,
		"height": 26px,
		"loader": 16px,
		"maxlength": -34px
	)
);

/**
$states map will have state specific inner maps.
**/
$states: (
	"primary": (
		"input": var(--color-primary-default),
		"border": var(--color-primary-default),
		"focus": var(--color-primary-default)
	),
	"default": (
		"input": var(--color-input-default),
		"border": var(--color-border-default),
		"focus": var(--color-primary-default)
	),
	"success": (
		"input": var(--color-success-default),
		"border": var(--color-success-default),
		"focus": var(--color-success-default)
	),
	"warning": (
		"input": var(--color-warning-default),
		"border": var(--color-warning-default),
		"focus": var(--color-warning-default)
	),
	"danger": (
		"input": var(--color-danger-default),
		"border": var(--color-danger-default),
		"focus": var(--color-danger-default)
	)
);