/// Output styles for a theme such as the inverse variant
/// @param {String|Null} $name (null) - The theme to output styles for.
/// @param {List} $icons [()] - A list of icons to support.
/// @access private
@mixin _oShareTheme($name: null, $icons: ()) {
	$border-color: _oShareGet('border-color', $name);
	$color: _oShareGet('color', $name);
	$color-encoded: str-slice(ie-hex-str($color), 4);

	.o-share__icon {
		color: $color;
		border-color: $border-color;

		@include oPrivateNormaliseFocusApply() {
			@include oPrivateNormaliseFocusContentForElementColour($color);
		}
	}

	.o-share__icon__image > svg {
		fill: currentColor;
	}

	// Output themed icons.
	@each $icon-name in $icons {
		$is-ft-icon: index($o-share-ft-icons-names, $icon-name);

		.o-share__icon--#{$icon-name}:hover,
		.o-share__icon--#{$icon-name}:focus {
			@if ($is-ft-icon) {
				border-color: oPrivateFoundationGet('o3-color-palette-teal-40');
				background-color: oPrivateFoundationGet('o3-color-palette-teal-40');
				color: oPrivateFoundationGet('o3-color-palette-white');
			} @else {
				$icon-color: map-get($_o-share-colors, $icon-name);
				border-color: $icon-color;
				background-color: $icon-color;
				color: oPrivateFoundationGet('o3-color-palette-white');
			}
		}
	}
}

/// Output styles to set the size and margins of o-share actions.
/// @param {String} $size-name [null] - One of 'default' or 'small'.
/// @param {Boolean} $vertical [false] - Whether to output styles to support the vertical variant
/// @access private
@mixin _oShareSize($size-name: null, $vertical: false) {
	// for the current variant get the width and margin
	$size: _oShareGet('size', $from: $size-name);
	$margin: _oShareGet('margin', $from: $size-name);
	// fticons SVG icons align to a 40x40 pixel grid, with 10px padding
	// built in on each side. Used to match the icon's inherent margin on the text.
	// https://github.com/Financial-Times/fticons/blob/master/contributing.md#design
	$default-icon-whitespace: div(10, 40);
	$icon-whitespace: $default-icon-whitespace * $size;

	.o-share__text {
		margin-right: $icon-whitespace;
	}

	.o-share__icon__image {
		width: $size - ($o-share-border-size * 2);
		height: $size - ($o-share-border-size * 2);
		background-size: $size $size;
	}

	// If there is not a margin use a negative margin
	// to make icons borders overlap.
	@if not $margin {
		.o-share__icon {
			margin: 0 #{-$o-share-border-size} 0 0;
		}

		.o-share__action:last-child .o-share__icon {
			margin: 0;
		}
	}
	// If there a margin for the current variant set a margin on the action
	// and remove and negative margin from the icon icon, which was added
	// so borders overlap.
	@if $margin {
		// Add margin to actions.
		.o-share__action {
			margin: 0 #{$margin} 0 0;
		}

		// Remove negative margin used so borders overlap.
		.o-share__icon {
			margin: 0;
		}

		// Increase click area of actions.
		.o-share__icon:after {
			width: calc(100% + #{$margin});
			height: calc(100% + #{$margin});
			top: -#{div($margin, 2)};
			left: -#{div($margin, 2)};
		}
	}

	// For vertical share icons switch the margins around.
	@if $vertical {
		// Margin between actions goes below.
		@if $margin {
			&.o-share--vertical .o-share__action {
				margin: 0 0 #{$margin};
			}
		}
		@if not $margin {
			// Negative margins to make icon borders overlap goes below.
			&.o-share--vertical .o-share__icon {
				margin: 0 0 -#{$o-share-border-size};
			}
		}
		// Margins between the icon and the text need setting.
		&.o-share--vertical .o-share__action--labelled .o-share__text {
			margin: calc(-#{$icon-whitespace} + #{oPrivateSpacingByName('s1')})
				0
				oPrivateSpacingByName('s1')
				0;
		}
		// When vertical, the width of the actions must not increase.
		&.o-share--vertical .o-share__action {
			max-width: $size;
		}
	}
}