////
/// @group o-buttons
/// @link http://registry.origami.ft.com/components/o-buttons
////

// @deprecated Set custom color white over slate @ 20%.
// This originally used black rather than slate, hence the misleading name to avoid a breaking change.
// Updating this with an abstract name on the next major release will remove ambiguity and be more flexible.
@include oColorsSetColor('white-black-20', oColorsMix($color: 'white', $background: 'slate', $percentage: 20));
// @deprecated

// Set custom color translucent teal @ 10%
@include oColorsSetColor('teal-transparent-10', oColorsMix($color: 'teal', $background: 'transparent', $percentage: 10));

/// scss-lint:disable SpaceAfterComma

// Theme: primary

@include oColorsSetUseCase(o-buttons-primary-normal,   text,              'white');
@include oColorsSetUseCase(o-buttons-primary-normal,   border,            'teal-50');
@include oColorsSetUseCase(o-buttons-primary-normal,   background,        'teal-50');
@include oColorsSetUseCase(o-buttons-primary-hover,    text,              'white');
@include oColorsSetUseCase(o-buttons-primary-hover,    border,            'teal-40');
@include oColorsSetUseCase(o-buttons-primary-hover,    background,        'teal-40');
@include oColorsSetUseCase(o-buttons-primary-active,   text,              'white');
@include oColorsSetUseCase(o-buttons-primary-active,   border,            'teal-30');
@include oColorsSetUseCase(o-buttons-primary-active,   background,        'teal-30');
@include oColorsSetUseCase(o-buttons-primary-pressedselected, text,       'white');
@include oColorsSetUseCase(o-buttons-primary-pressedselected, border,     'teal-30');
@include oColorsSetUseCase(o-buttons-primary-pressedselected, background, 'teal-30');

// Theme: secondary

@include oColorsSetUseCase(o-buttons-secondary-normal,   text,              'teal-50');
@include oColorsSetUseCase(o-buttons-secondary-normal,   border,            'teal-50');
@include oColorsSetUseCase(o-buttons-secondary-normal,   background,        'transparent');
@include oColorsSetUseCase(o-buttons-secondary-hover,    text,              'teal-50');
@include oColorsSetUseCase(o-buttons-secondary-hover,    border,            'teal-50');
@include oColorsSetUseCase(o-buttons-secondary-hover,    background,        'teal-transparent-10');
@include oColorsSetUseCase(o-buttons-secondary-active,   text,              'white');
@include oColorsSetUseCase(o-buttons-secondary-active,   border,            'teal-50');
@include oColorsSetUseCase(o-buttons-secondary-active,   background,        'teal-50');
@include oColorsSetUseCase(o-buttons-secondary-pressedselected, text,       'white');
@include oColorsSetUseCase(o-buttons-secondary-pressedselected, border,     'teal-50');
@include oColorsSetUseCase(o-buttons-secondary-pressedselected, background, 'teal-50');

// Theme: inverse

@include oColorsSetUseCase(o-buttons-inverse-normal,   text,              'white');
@include oColorsSetUseCase(o-buttons-inverse-normal,   border,            'white');
@include oColorsSetUseCase(o-buttons-inverse-normal,   background,        'transparent');
@include oColorsSetUseCase(o-buttons-inverse-hover,    text,              'white');
@include oColorsSetUseCase(o-buttons-inverse-hover,    border,            'white');
@include oColorsSetUseCase(o-buttons-inverse-hover,    background,        'white-black-20');
@include oColorsSetUseCase(o-buttons-inverse-active,   text,              'black');
@include oColorsSetUseCase(o-buttons-inverse-active,   border,            'white');
@include oColorsSetUseCase(o-buttons-inverse-active,   background,        'white');
@include oColorsSetUseCase(o-buttons-inverse-pressedselected, text,       'black');
@include oColorsSetUseCase(o-buttons-inverse-pressedselected, border,     'white');
@include oColorsSetUseCase(o-buttons-inverse-pressedselected, background, 'white');

// Theme: mono

@include oColorsSetUseCase(o-buttons-mono-normal,   text,              'black');
@include oColorsSetUseCase(o-buttons-mono-normal,   border,            'black');
@include oColorsSetUseCase(o-buttons-mono-normal,   background,        'transparent');
@include oColorsSetUseCase(o-buttons-mono-hover,    text,              'black');
@include oColorsSetUseCase(o-buttons-mono-hover,    border,            'black');
@include oColorsSetUseCase(o-buttons-mono-hover,    background,        'black-10');
@include oColorsSetUseCase(o-buttons-mono-active,   text,              'white');
@include oColorsSetUseCase(o-buttons-mono-active,   border,            'black');
@include oColorsSetUseCase(o-buttons-mono-active,   background,        'black');
@include oColorsSetUseCase(o-buttons-mono-pressedselected, text,       'white');
@include oColorsSetUseCase(o-buttons-mono-pressedselected, border,     'black');
@include oColorsSetUseCase(o-buttons-mono-pressedselected, background, 'black');

// Theme: B2C

@include oColorsSetUseCase(o-buttons-b2c-normal, text,                'white');
@include oColorsSetUseCase(o-buttons-b2c-normal, background,          'org-b2c-dark');
@include oColorsSetUseCase(o-buttons-b2c-normal, border,              'org-b2c-dark');
@include oColorsSetUseCase(o-buttons-b2c-hover, text,                 'black-90');
@include oColorsSetUseCase(o-buttons-b2c-hover, border,               'org-b2c-dark');
@include oColorsSetUseCase(o-buttons-b2c-hover, background,           'org-b2c');
@include oColorsSetUseCase(o-buttons-b2c-pressedselected, background, 'org-b2c-light');
@include oColorsSetUseCase(o-buttons-b2c-pressedselected, border,     'org-b2c-light');
@include oColorsSetUseCase(o-buttons-b2c-pressedselected, text,       'black-90');
@include oColorsSetUseCase(o-buttons-b2c-active, text,                'black-90');
@include oColorsSetUseCase(o-buttons-b2c-disabled, background,        'white');
@include oColorsSetUseCase(o-buttons-b2c-disabled, text,              'org-b2c-dark');


/// Theme: B2C
///
/// @type Map

$o-buttons-themes__b2c: (
	normal: (
		color: oColorsGetColorFor(o-buttons-b2c-normal, text),
		background-color: oColorsGetColorFor(o-buttons-b2c-normal, background),
		border-color: oColorsGetColorFor(o-buttons-b2c-normal, border),
	),
	active: (
		color: oColorsGetColorFor(o-buttons-b2c-pressedselected, text),
		background-color: rgba(oColorsGetColorFor(o-buttons-b2c-hover, background), 0.8),
		border-color: oColorsGetColorFor(o-buttons-b2c-pressedselected, border),
	),
	hover: (
		background-color: rgba(oColorsGetColorFor(o-buttons-b2c-hover, background), 0.8),
		color: oColorsGetColorFor(o-buttons-b2c-pressedselected, text),
		border-color: oColorsGetColorFor(o-buttons-b2c-hover, border),
	),
	pressedselected: (
		// sass-lint:disable no-important
		background-color: oColorsGetColorFor(o-buttons-b2c-pressedselected, background) !important,
		// sass-lint:enable no-important
		color: oColorsGetColorFor(o-buttons-b2c-pressedselected, text),
		border-color: oColorsGetColorFor(o-buttons-b2c-pressedselected, border),
	),
	disabled: (
		color: oColorsGetColorFor(o-buttons-b2c-disabled, text),
		background-color: rgba(oColorsGetColorFor(o-buttons-b2c-disabled, background), 0.4),
	)
) !default;