/**
$states map will have state specific inner maps.
**/
$states: (
	"primary": (
		"background": var(--color-primary-default),
		"border": var(--color-primary-default),
		"hover": var(--color-primary-default-hover),
		"hover-border": var(--color-primary-default-hover)
	),
	"default": (
		"background": var(--color-primary-default),
		"border": var(--color-text-default),
		"hover": var(--color-primary-default-hover),
		"hover-border": var(--color-text-default-hover)
	),
	"success": (
		"background": var(--color-success-default),
		"border": var(--color-success-default),
		"hover": var(--color-success-default-hover),
		"hover-border": var(--color-success-default-hover)
	),
	"warning": (
		"background": var(--color-warning-default),
		"border": var(--color-warning-default),
		"hover": var(--color-warning-default-hover),
		"hover-border": var(--color-warning-default-hover)
	),
	"danger": (
		"background": var(--color-danger-default),
		"border": var(--color-danger-default),
		"hover": var(--color-danger-default-hover),
		"hover-border": var(--color-danger-default-hover)
	),
	"inherit": (
		"background": var(--color-checkbox-default),
		"border": var(--color-radio-outline-default),
		"hover": var(--color-switch-default-hover),
		"hover-border": var(--color-radio-border-hover)
	)
);

/**
$sizes map will have state specific inner maps.
**/
$sizes: (
	"small": (
		"height": 12px,
		"inner-height": 6px
	),
	"medium": (
		"height": 16px,
		"inner-height": 8px
	)
);