@import '@financial-times/o-private-foundation/main';
@import '@financial-times/o-overlay/main';

@import 'src/scss/variables';
@import 'src/scss/brand';
@import 'src/scss/mixins';

/// Outputs all available features and styles for tooltips.
///
/// @output The output includes the `.o-tooltip` class definition.
/// @example scss - All tooltip styles
///   @include oTooltip();
/// @example scss -  Tooltip styles without extra themes such as for ft professional
///   @include oTooltip($opts: ());
/// @access public
@mixin oTooltip(
	$opts: (
		'themes': (
			'professional',
		),
	)
) {
	@include oPrivateFoundation();

	$themes: if(map-has-key($opts, 'themes'), map-get($opts, 'themes'), ());

	// Tooltip relies on the o-grid layout sizes being defined.
	// This is still specification-compliant, as these mixins only output
	// element selectors – nothing prefixed with o-grid
	@include oPrivateGridSurfaceCurrentLayout();

	.o-tooltip {
		@include oPrivateVisualEffectsShadowContent($elevation: 'high');
		@include _oTooltipThemeContent(); // Style for the default theme.
		position: absolute;
		z-index: 10;
		box-sizing: border-box;
		opacity: 0;
		transition: opacity $_o-tooltip-animation-duration
				$o-pf-visual-effects-timing-fade,
			transform $_o-tooltip-animation-duration $o-pf-visual-effects-timing-slide;
		border: 0;
		display: none;

		&.visible {
			transform: translate(0, 0);
			opacity: 1;
		}

		&[data-o-tooltip-position='left']:not(.visible) {
			transform: translate(-$_o-tooltip-animation-distance, 0);
		}
		&[data-o-tooltip-position='right']:not(.visible) {
			transform: translate($_o-tooltip-animation-distance, 0);
		}
		&[data-o-tooltip-position='top']:not(.visible) {
			transform: translate(0, -$_o-tooltip-animation-distance);
		}
		&[data-o-tooltip-position='bottom']:not(.visible) {
			transform: translate(0, $_o-tooltip-animation-distance);
		}
	}

	.o-tooltip-content {
		font-family: oPrivateFoundationGet('o3-type-body-base-font-family');
		font-size: oPrivateFoundationGet('o3-type-body-base-font-size');
		line-height: oPrivateFoundationGet('o3-type-body-base-line-height');
		font-weight: oPrivateFoundationGet('o3-type-body-base-font-weight');
		position: relative;
		box-sizing: border-box;
		overflow: auto;
		padding: oPrivateFoundationGet('o3-spacing-3xs')
			oPrivateFoundationGet('o3-spacing-m')
			oPrivateFoundationGet('o3-spacing-3xs')
			oPrivateFoundationGet('o3-spacing-xs');
		float: left;
		hyphens: auto; // Breaks long words to fit into smaller screen sizes

		> *:first-child {
			margin-top: 0;
		}
		> *:last-child {
			margin-bottom: 0;
		}
	}

	.o-tooltip--arrow-above,
	.o-tooltip--arrow-below,
	.o-tooltip--arrow-left,
	.o-tooltip--arrow-right {
		&:before,
		&:after {
			content: '';
			position: absolute;
			border: solid transparent;
		}
		&:before {
			// 1px offset so it appears properly
			border-width: $_o-tooltip-arrow-size + $_o-tooltip-border-width + 1;
		}
		&:after {
			border-width: $_o-tooltip-arrow-size;
		}
	}

	.o-tooltip--arrow-left,
	.o-tooltip--arrow-right {
		&.o-tooltip-arrow--align-top:before,
		&.o-tooltip-arrow--align-top:after {
			top: 0;
			margin-top: 0;
		}

		&.o-tooltip-arrow--align-bottom:before,
		&.o-tooltip-arrow--align-bottom:after {
			top: auto;
			bottom: 0;
			margin-top: 0;
		}

		&:before,
		&:after {
			top: 50%;
		}
		&:before {
			// 1px offset so it appears properly
			margin-top: -$_o-tooltip-arrow-size - $_o-tooltip-border-width - 1;
		}
		&:after {
			margin-top: -$_o-tooltip-arrow-size;
		}
	}

	.o-tooltip--arrow-left {
		&:before,
		&:after {
			right: 100%;
			border-left-width: 0;
		}
		&:before {
			border-right-color: $_o-tooltip-shadow-color;
		}
	}

	.o-tooltip--arrow-right {
		&:before,
		&:after {
			left: 100%;
			border-right-width: 0;
		}
		&:before {
			border-left-color: $_o-tooltip-shadow-color;
		}
	}

	.o-tooltip--arrow-above,
	.o-tooltip--arrow-below {
		&.o-tooltip-arrow--align-left:before,
		&.o-tooltip-arrow--align-left:after {
			left: 10%;
		}

		&.o-tooltip-arrow--align-right:before,
		&.o-tooltip-arrow--align-right:after {
			left: 90%;
		}

		&:before,
		&:after {
			left: 50%;
		}
		&:before {
			// 1px offset so it appears properly
			margin-left: -$_o-tooltip-arrow-size - $_o-tooltip-border-width - 1;
		}
		&:after {
			margin-left: -$_o-tooltip-arrow-size;
		}
	}

	.o-tooltip--arrow-above {
		&:before,
		&:after {
			bottom: 100%;
			border-top-width: 0;
		}
		&:before {
			border-bottom-color: $_o-tooltip-shadow-color;
		}
	}

	.o-tooltip--arrow-below {
		&:before,
		&:after {
			top: 100%;
			border-bottom-width: 0;
		}
		&:before {
			border-top-color: $_o-tooltip-shadow-color;
		}
	}

	.o-tooltip-close {
		@include oPrivateIconsContent(
			'cross',
			_oTooltipGet('close-foreground-color'),
			$size: 20px
		);
		// start: undo button styles
		appearance: none;
		border: 0;
		font: inherit;
		outline: inherit;
		// end: undo button styles
		box-sizing: content-box;
		position: absolute;
		margin: 5px 5px 15px 15px;
		padding: 0;
		cursor: pointer;
		user-select: none;
		top: 0;
		right: 0;

		// Increase hit zone of the button around it for better usability
		&:after {
			position: absolute;
			content: '';
			top: -(oPrivateSpacingByName('s3'));
			right: -(oPrivateSpacingByName('s3'));
			left: -(oPrivateSpacingByName('s3'));
			bottom: -(oPrivateSpacingByName('s3'));
		}
	}

	@each $theme in $themes {
		@if _oTooltipSupports($theme) {
			.o-tooltip.o-tooltip--#{$theme} {
				@include _oTooltipThemeContent($theme);
			}
		}
	}
}

// If silent mode is disabled, output all of the default tooltip styles.
@if ($o-tooltip-is-silent == false) {
	@include oTooltip();

	// Set module to silent again
	$o-tooltip-is-silent: true !global;
}