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

@import 'src/scss/variables';

/// Output all o-social-follow styles.
///
/// @access public
/// @param {Map} $opts [('icons': ('twitter', 'facebook', 'linkedin', 'instagram'), 'themes': ('inverse'))] The o-social-follow variants to include styles for (see the README for more details).
/// @example Output all styles.
///		@include oSocialFollow();
///
/// @example Output styles for select variants.
///		@include oSocialFollow($opts: (
///       'icons': ('twitter', 'facebook', 'linkedin', 'instagram'),
///       'standalone': true,
///       'themes': ('inverse')
///   ));
@mixin oSocialFollow(
	$opts: (
		'icons': map-keys($_o-social-follow-icons),
		'standalone': true,
		'themes': (
			'inverse',
		),
	)
) {
	@include oPrivateFoundation();

	// 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 themes are given.
	$themes: map-get($opts, 'themes');
	$themes: if($themes, $themes, ());
	$standalone: map-get($opts, 'standalone');

	// 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-social-follow {
		display: flex;
		flex-wrap: wrap;
		gap: oPrivateSpacingByName('s4');
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.o-social-follow-icon {
		--o-social-follow-icon-color: black;
		position: relative;
		display: flex;
		width: 38px;
		height: 38px;
		border: 1px solid var(--o-social-follow-icon-color);

		&:before {
			content: '';
			flex-grow: 1;
			mask-repeat: no-repeat;
			mask-size: contain;
			mask-position: center;
			background-color: var(--o-social-follow-icon-color);
		}

		&:hover,
		&:focus {
			--o-social-follow-icon-color: white;
		}

		@include oPrivateNormaliseFocusApply() {
			@include oPrivateNormaliseFocusContent();
		}
	}

	@if $standalone {
		.o-social-follow-icon--standalone {
			border-color: transparent;
		}
	}

	@if index($themes, 'inverse') {
		.o-social-follow-icon--inverse {
			--o-social-follow-icon-color: white;
			@include oPrivateNormaliseFocusApply() {
				@include oPrivateNormaliseFocusContentInverse();
			}
		}
	}

	@each $icon-name in $icons {
		$social-brand-colour: map-get($_o-social-follow-icons, $icon-name);
		@if not $social-brand-colour {
			@error 'o-social-follow: "#{$icon-name}" is not supported. Icons must be one or more of "#{map-keys($_o-social-follow-icons)}"';
		}
		.o-social-follow-icon--#{$icon-name} {
			$icon-image-url: 'https://www.ft.com/__origami/service/image/v2/images/raw/ftsocial-v2%3A#{$icon-name}?source=#{$system-code}';
			--o-social-follow-brand-color: #{$social-brand-colour};

			&:before {
				mask-image: url($icon-image-url);
			}

			&:hover,
			&:focus {
				background-color: $social-brand-colour;
				border-color: var(--o-social-follow-brand-color);
			}
		}
	}

	.o-social-follow-icon__label {
		@include oPrivateNormaliseVisuallyHidden();
	}
}