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

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

/// Output all o-share styles.
///
/// @access public
/// @param {Map} $opts [('icons': ('x', 'facebook', 'linkedin', 'link', 'share', 'mail', 'pinterest', 'whatsapp', 'corporate'), 'sizes': ('small'), 'vertical': true, 'inverse': true)] The o-share variants to include styles for (see the README for more details).
/// @example Output all styles.
///		@include oShare();
///
/// @example Output styles for select variants.
///		@include oShare($opts: (
///       'icons': ('x', 'facebook', 'linkedin', 'link', 'share', 'mail', 'pinterest', 'whatsapp', 'corporate'),
///       'sizes': ('small'),
///       'vertical': true,
///       'inverse': true
///   ));
@mixin oShare(
	$opts: (
		'icons': $_o-share-icons,
		'sizes': (
			'small',
		),
		'vertical': true,
		'inverse': true,
	)
) {
	@include oPrivateFoundation();

	$vertical-enabled: map-get($opts, 'vertical');
	$inverse-enabled: map-get($opts, 'inverse');
	// Default to an empty list if no icons are given.
	$icons: map-get($opts, 'icons');
	$icons: if($icons, $icons, ());
	// Default to an empty list if no sizes are given.
	$sizes: map-get($opts, 'sizes');
	$sizes: if($sizes, $sizes, ());

	// Error if the global $system-code variable is not set.
	@if (
		global-variable-exists('system-code') ==
			false or
			type-of($system-code) !=
			'string'
	) {
		@error 'A global "$system-code" Sass variable must be set to a valid [Bizops system code](https://biz-ops.in.ft.com/list/Systems).';
	}

	.o-share {
		// Include styles for the default theme.
		@include _oShareTheme($icons: $icons);
		// Include styles for the default size.
		@include _oShareSize($vertical: $vertical-enabled);
		display: inline-block;

		ul {
			margin: 0;
			padding: 0;
		}
	}

	.o-share__action {
		box-sizing: border-box;
		float: left;
		list-style-type: none;
		cursor: pointer;
		line-height: 1;
	}

	.o-share__icon {
		display: flex; // flex ignores whitespace
		align-items: center;
		position: relative;
		cursor: pointer;
		padding: 0;
		background-color: transparent;
		background-repeat: no-repeat;
		border: $o-share-border-size $o-share-border-style
				oPrivateFoundationGet('o3-color-palette-black-50');
		// undo browser default anchor tag styles
		color: oPrivateFoundationGet('o3-color-palette-black');
		text-decoration: none;
		// add z-index on hover or focus so the border of the icon is
		// always displayed over the border of the next icon
		&:hover,
		&:focus {
			z-index: 1;
		}

		// Used as an overlay to increase the hit target for accessibility
		&:after {
			position: absolute;
			display: block;
			content: '';
		}
	}

	.o-share__text {
		@include oPrivateTypographySans($scale: -1);
		text-align: center;
	}

	// Icon text is visually hidden by default without the class
	// `.o-share__action--labelled`.
	.o-share__action:not(.o-share__action--labelled) .o-share__text {
		@include oPrivateNormaliseVisuallyHidden();
	}

	@if index($sizes, 'small') != null {
		.o-share--small {
			@include _oShareSize('small', $vertical-enabled);
		}
	}

	@if $inverse-enabled {
		.o-share--inverse {
			@include _oShareTheme('inverse', $icons);
		}
	}

	@if $vertical-enabled {
		.o-share--vertical {
			.o-share__action {
				float: none;
			}

			.o-share__icon {
				flex-direction: column;
			}
			.o-share__text {
				// Horizontal space is tight for vertical share labels.
				@include oPrivateTypographySans($scale: -1);
				word-wrap: anywhere;
				overflow-wrap: anywhere;
			}
		}
	}
}

@if (not $o-share-is-silent) {
	@include oShare();
	// Set to silent again to avoid being output twice
	$o-share-is-silent: true !global;
}