@import '@financial-times/o-private-foundation/main';
/// @access private
$_ftConceptButtonThemes: (
	link: (
		background: oPrivateFoundationGet('o3-color-use-case-link-text'),
		text: oPrivateFoundationGet('o3-color-palette-white'),
		highlight: oPrivateFoundationGet('o3-color-use-case-link-text-hover'),
		pressed-highlight: rgba(oPrivateFoundationGet('o3-color-use-case-link-text-hover'), 0.05),
		disabled: rgba(oPrivateFoundationGet('o3-color-palette-black'), 0.5),
	),
	standard: (
		background: oPrivateFoundationGet('o3-color-palette-claret'),
		text: oPrivateFoundationGet('o3-color-palette-white'),
		highlight: oPrivateFoundationGet('o3-color-palette-claret-50'),
		pressed-highlight: rgba(oPrivateFoundationGet('o3-color-palette-black'), 0.05),
		disabled: rgba(oPrivateFoundationGet('o3-color-palette-black'), 0.5),
	),
	inverse: (
		background: oPrivateFoundationGet('o3-color-palette-white'),
		text: oPrivateFoundationGet('o3-color-palette-claret'),
		highlight: rgba(white, 0.8),
		pressed-highlight: rgba(white, 0.2),
		disabled: rgba(oPrivateFoundationGet('o3-color-palette-white'), 0.5),
	),
	opinion: (
		background: oPrivateFoundationGet('o3-color-palette-oxford-40'),
		text: oPrivateFoundationGet('o3-color-palette-white'),
		highlight: oPrivateFoundationGet('o3-color-palette-oxford-30'),
		pressed-highlight: rgba(oPrivateFoundationGet('o3-color-palette-oxford-40'), 0.2),
		disabled: rgba(oPrivateFoundationGet('o3-color-palette-black'), 0.5),
	),
	monochrome: (
		background: oPrivateFoundationGet('o3-color-palette-white'),
		text: oPrivateFoundationGet('o3-color-palette-black'),
		highlight: oPrivateFoundationGet('o3-color-palette-white-80'),
		pressed-highlight: rgba(oPrivateFoundationGet('o3-color-palette-white'), 0.2),
		disabled: rgba(oPrivateFoundationGet('o3-color-palette-white'), 0.5),
	),
	inverse-monochrome: (
		background: oPrivateFoundationGet('o3-color-palette-black'),
		text: oPrivateFoundationGet('o3-color-palette-white'),
		highlight: oPrivateFoundationGet('o3-color-palette-black-80'),
		pressed-highlight: rgba(oPrivateFoundationGet('o3-color-palette-black'), 0.2),
		disabled: rgba(oPrivateFoundationGet('o3-color-palette-black'), 0.5),
	),
	professional-inverse: (
		background: oPrivateFoundationGet('o3-color-palette-mint'),
		text: oPrivateFoundationGet('o3-color-palette-black'),
		highlight: oPrivateFoundationGet('o3-color-palette-mint'),
		pressed-highlight: rgba(oPrivateFoundationGet('o3-color-palette-mint'), 0.15),
		disabled: rgba(oPrivateFoundationGet('o3-color-palette-black'), 0.5),
	),
);

@function _ftConceptButtonGetThemeColor($key) {
	@return map-get($theme-map, $key);
}

@mixin _ftConceptButtonWithTheme($theme) {
	@if type-of($theme) == 'map' {
		$theme-map: $theme !global;
	} @else {
		$theme-map: map-get($_ftConceptButtonThemes, $theme) !global;
	}

	@content;

	// stylelint-disable order/order
	$theme-map: null !global;
}

@mixin _ftConceptButtonGetIcon($name, $color) {
	@include oPrivateIconsContent(
		$icon-name: $name,
		$size: 10,
		$color: $color,
		$iconset-version: 1
	);
	content: '';
}

@mixin _ftConceptButtonPlusIcon($color) {
	@include _ftConceptButtonGetIcon('plus', $color);
	background-size: 25px;
	margin: 0 6px -1px 0;
}

@mixin _ftConceptButtonTickIcon($color) {
	@include _ftConceptButtonGetIcon('tick', $color);
	background-size: 21px;
}

@mixin _ftConceptButtonIcon($theme: standard) {
	@include _ftConceptButtonWithTheme($theme) {
		&::before {
			@include _ftConceptButtonPlusIcon(
				_ftConceptButtonGetThemeColor(background)
			);
		}

		&[aria-pressed='true'] {
			&::before {
				@include _ftConceptButtonTickIcon(_ftConceptButtonGetThemeColor(text));
			}
		}

		&[disabled],
		&[disabled]:hover {
			background: transparent;

			&::before {
				@include _ftConceptButtonPlusIcon(
					_ftConceptButtonGetThemeColor(disabled)
				);
				opacity: 0.5;
			}

			&[aria-pressed='true']::before {
				@include _ftConceptButtonTickIcon(
					_ftConceptButtonGetThemeColor(disabled)
				);
			}
		}
	}
}

@mixin _ftConceptButtonTheme($theme: standard, $with-toggle-icon: false) {
	@include _ftConceptButtonWithTheme($theme) {
		@include oPrivateNormaliseFocusApply() {
			@include oPrivateNormaliseFocusContentForElementColour(
				_ftConceptButtonGetThemeColor(background)
			);
		}

		background-color: transparent;
		border: 1px solid _ftConceptButtonGetThemeColor(background);
		color: _ftConceptButtonGetThemeColor(background);

		&:hover,
		&:focus {
			background-color: _ftConceptButtonGetThemeColor(pressed-highlight);
			border-color: _ftConceptButtonGetThemeColor(background);
			color: _ftConceptButtonGetThemeColor(background);
		}

		&[aria-pressed='true'] {
			background-color: _ftConceptButtonGetThemeColor(background);
			border: 1px solid _ftConceptButtonGetThemeColor(background);
			color: _ftConceptButtonGetThemeColor(text);

			&:hover,
			&:focus {
				background-color: _ftConceptButtonGetThemeColor(highlight);
				border-color: _ftConceptButtonGetThemeColor(highlight);
				color: _ftConceptButtonGetThemeColor(text);
			}
		}

		&[disabled]:hover,
		&[disabled] {
			background: transparent;
			border: 1px solid _ftConceptButtonGetThemeColor(disabled);
			color: _ftConceptButtonGetThemeColor(disabled);
		}
	}
}

@mixin _ftConceptButtonBase() {
	@include oPrivateTypographySans($weight: 'semibold', $scale: -1);
	border-radius: 100px;
	box-sizing: content-box;
	display: inline-block;
	outline-offset: 2px;
	overflow: hidden;
	padding: oPrivateSpacingByName('s1') oPrivateSpacingByName('s2');
	text-align: left;
	text-overflow: ellipsis;
	max-width: 15em;
	transition: border-color, background-color 0.5s ease;
	white-space: nowrap;
}

@mixin ftConceptButton(
	$themes: (
		'standard',
		'opinion',
		'inverse',
		'monochrome',
		'professional-inverse',
	)
) {
	@include oPrivateFoundation();

	.ft-concept-button__link,
	.ft-concept-button__button {
		@include _ftConceptButtonBase();
	}

	.ft-concept-button__link {
		@include _ftConceptButtonTheme('link');
		text-decoration: none;
	}

	.ft-concept-button__announcement {
		@include oPrivateNormaliseVisuallyHidden();
	}

	@each $theme in map-keys($_ftConceptButtonThemes) {
		.ft-concept-button--#{$theme} {
			.ft-concept-button__button {
				@include _ftConceptButtonTheme($theme);
			}
			&.ft-concept-button--follow .ft-concept-button__button {
				@include _ftConceptButtonIcon($theme);
			}
		}
	}
}