@import './custom-themes';

/// Create a single button with a custom class.
/// @param {Map} $opts [('type': 'null', 'theme': null, 'size': null, 'icon': null, 'icon-only': false)] - The kind of button styles to output.
@mixin oPrivateButtonsContent(
	$opts: (
		'type': null,
		'theme': null,
		'size': null,
		'icon': null,
		'icon-only': false,
	)
) {
	$theme: map-get($opts, 'theme');
	$theme: if($theme, $theme, 'standard');
	$type: map-get($opts, 'type');
	$type: if($type, $type, 'primary');

	@include _oPrivateButtonsBase($opts);

	/*
		Type and theme specific styles.
		FT Professional was treated as a theme, but is now considered a brand in tokens.
	 */
	$sub-brand: null;
	@if $theme == 'professional' {
		$theme: 'standard';
		$sub-brand: 'professional';
	}

	@if $theme == 'professional-inverse' {
		$theme: 'inverse';
		$sub-brand: 'professional';
	}
	@include _oPrivateButtonsTheme(
		(
			'color':
				oPrivateFoundationGet(
					'_o3-button-' + $type + '-' + $theme + '-color',
					$sub-brand
				),
			'background':
				oPrivateFoundationGet(
					'_o3-button-' + $type + '-' + $theme + '-background',
					$sub-brand
				),
			'border':
				oPrivateFoundationGet(
					'_o3-button-' + $type + '-' + $theme + '-border',
					$sub-brand
				),
			'hover-color':
				oPrivateFoundationGet(
					'_o3-button-' + $type + '-' + $theme + '-hover-color',
					$sub-brand
				),
			'hover-background':
				oPrivateFoundationGet(
					'_o3-button-' + $type + '-' + $theme + '-hover-background',
					$sub-brand
				),
			'hover-border':
				oPrivateFoundationGet(
					'_o3-button-' + $type + '-' + $theme + '-hover-border',
					$sub-brand
				),
			'focus-color':
				oPrivateFoundationGet(
					'_o3-button-' + $type + '-' + $theme + '-focus-color',
					$sub-brand
				),
			'focus-background':
				oPrivateFoundationGet(
					'_o3-button-' + $type + '-' + $theme + '-focus-background',
					$sub-brand
				),
			'focus-border':
				oPrivateFoundationGet(
					'_o3-button-' + $type + '-' + $theme + '-focus-border',
					$sub-brand
				),
			'active-color':
				oPrivateFoundationGet(
					'_o3-button-' + $type + '-' + $theme + '-active-color',
					$sub-brand
				),
			'active-background':
				oPrivateFoundationGet(
					'_o3-button-' + $type + '-' + $theme + '-active-background',
					$sub-brand
				),
			'active-border':
				oPrivateFoundationGet(
					'_o3-button-' + $type + '-' + $theme + '-active-border',
					$sub-brand
				),
		)
	);
}

// Button styles shared across all types/theme.
@mixin _oPrivateButtonsBase(
	$opts: (
		'size': null,
		'icon': null,
		'icon-only': false,
	)
) {
	$icon-only: map-get($opts, 'icon-only');
	$size: map-get($opts, 'size');
	$icon: map-get($opts, 'icon');

	font-family: oPrivateFoundationGet('o3-type-body-highlight-font-family');
	font-size: oPrivateFoundationGet('o3-type-body-highlight-font-size');
	line-height: oPrivateFoundationGet('o3-type-body-highlight-line-height');
	font-weight: oPrivateFoundationGet('o3-type-body-highlight-font-weight');

	--_o-pf-button-border-size: 1px;
	--_o-pf-button-icon-size: calc(
		var(--_o-pf-button-min-height) - (var(--_o-pf-button-block-padding) * 2)
	);

	/* Button Sizes */
	@if ($size == 'big') {
		--_o-pf-button-min-width: 80px;
		--_o-pf-button-min-height: 44px;

		--_o-pf-button-inline-padding-start: #{oPrivateFoundationGet(
				'o3-spacing-2xs'
			)};
		--_o-pf-button-inline-padding-end: #{oPrivateFoundationGet(
				'o3-spacing-2xs'
			)};
		--_o-pf-button-block-padding: #{oPrivateFoundationGet('o3-spacing-4xs')};
	} @else {
		--_o-pf-button-min-width: 60px;
		--_o-pf-button-min-height: 28px;

		--_o-pf-button-inline-padding-start: #{oPrivateFoundationGet(
				'o3-spacing-4xs'
			)};
		--_o-pf-button-inline-padding-end: #{oPrivateFoundationGet(
				'o3-spacing-4xs'
			)};
		--_o-pf-button-block-padding: #{oPrivateFoundationGet('o3-spacing-5xs')};
		// Non-standard font size for small buttons.
		font-size: oPrivateFoundationGet('o3-font-size-negative-2');
		line-height: oPrivateFoundationGet('o3-font-lineheight-negative-2');
	}

	min-width: var(--_o-pf-button-min-width);
	min-height: var(--_o-pf-button-min-height, 44px);
	padding: 0 var(--_o-pf-button-inline-padding-end) 0
		var(--_o-pf-button-inline-padding-start);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	vertical-align: middle;
	border: var(--_o-pf-button-border-size) solid transparent;
	border-radius: oPrivateFoundationGet('o3-border-radius-1');
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: 0.3s background-color, 0.15s color ease-out,
		0.15s border-color ease-out;
	appearance: none;

	&[disabled] {
		pointer-events: none;
		opacity: 0.4;
		cursor: default;
	}

	/* ICON */
	@if ($icon) {
		--_o-pf-button-inline-padding-end: #{oPrivateFoundationGet('o3-spacing-s')};
		@if ($size != 'big') {
			--_o-pf-button-inline-padding-end: #{oPrivateFoundationGet(
					'o3-spacing-4xs'
				)};
		}

		&::before {
			content: '';
			width: var(--_o-pf-button-icon-size);
			height: var(--_o-pf-button-icon-size);
			mask-image: #{oPrivateFoundationGet('o3-icon-' + $icon)};
			mask-repeat: no-repeat;
			mask-size: contain;
			display: inline-block;
			background-color: currentColor;
			margin-right: #{oPrivateFoundationGet('o3-spacing-4xs')};
		}

		/*
        	Ensure iconography is maintained when forced colours is enabled.
        	E.g. Windows High Contrast Mode
        	https://drafts.csswg.org/css-color/#valdef-color-buttontext
     	*/
		@media (forced-colors: active) {
			&:is(button)::before {
				background-color: ButtonText;
			}
			&:is(a)::before {
				background-color: LinkText;
			}
		}
	}

	// ICON ONLY
	@if ($icon-only) {
		--_o-pf-button-min-width: var(--_o-pf-button-min-height);
		--_o-pf-button-inline-padding-start: 0;
		--_o-pf-button-inline-padding-end: 0;
		&::before {
			margin-right: 0;
		}
	}
}

// Button styles unique to a theme.
@mixin _oPrivateButtonsTheme($theme) {
	color: map-get($theme, 'color');
	background-color: map-get($theme, 'background');
	border-color: map-get($theme, 'border');

	&:hover {
		color: map-get($theme, 'hover-color');
		background-color: map-get($theme, 'hover-background');
		border-color: map-get($theme, 'hover-border');
	}

	&:focus-visible {
		outline: 0; // Undo standard o2 focus styles
		color: map-get($theme, 'focus-color');
		background-color: map-get($theme, 'focus-background');
		border-color: map-get($theme, 'focus-border');
	}

	@include oPrivateNormaliseFocusApply() {
		@include oPrivateNormaliseFocusContentForElementColour(
			map-get($theme, 'focus-background')
		);
		// Ensure that the focus ring of a button is not hidden by
		// adjacent buttons, e.g. in tabs or pagination contexts.
		z-index: 1;
	}

	&:is(:active, [aria-selected='true'], [aria-current], [aria-pressed='true']) {
		color: map-get($theme, 'active-color');
		background-color: map-get($theme, 'active-background');
		border-color: map-get($theme, 'active-border');
	}
}
