/// Construct a logo image URL
///
/// @param {String} $logo-name
/// @param {Number} $fallback-width
@mixin _oFooterBrandImage($logo-name, $fallback-width) {
	// Error if the global $system-code variable is not set.
	// This is required for image service requests.
	@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).';
	}

	$base-url: 'https://images.ft.com/v3/image/raw/ftlogo:';
	background-image: url($base-url + $logo-name + '?source=#{$system-code}&format=svg');
}

/// Styles for the dark theme
/// @param {String} $theme - The theme, see _brand.scss for theme configuration.
@mixin _oFooterTheme($theme) {
	@if $theme != 'light' and $theme != 'dark' {
		@error 'No theme "#{inspect($theme)}" exists. Supported themes include "light" and "dark".';
	}

	.o-footer--theme-#{$theme} {
		color: _oFooterGet('text', $from: $theme);
		background: _oFooterGet('background', $from: $theme);

		.o-footer__title {
			color: _oFooterGet('title', $from: $theme);
		}

		.o-footer__matrix-link--more:after {
			@include oPrivateIconsContent(
				$icon-name: 'arrow-right',
				$size: $_o-footer-icon-size,
				$color: _oFooterGet('text', $from: $theme),
				$include-base-styles: false
			);
		}

		.o-footer__matrix-title--link,
		.o-footer__matrix-title[aria-expanded] {
			border-color: _oFooterGet('border', $from: $theme);
		}

		.o-footer__matrix-title a {
			color: _oFooterGet('text', $from: $theme);
		}

		a {
			color: _oFooterGet('link', $from: $theme);

			&:hover,
			&:focus {
				color: _oFooterGet('link-hover', $from: $theme);
			}
		}

		.o-footer__copyright {
			color: _oFooterGet('copyright', $from: $theme);
		}

		.o-footer__brand {
			color: _oFooterGet('text', $from: $theme);
			background: _oFooterGet('brand-background', $from: $theme);
		}
	}
}

/// Styles for the navigation matrix
/// @param {List} $themes - a list of themes include
@mixin _oFooterMatrix($themes) {
	.o-footer__matrix,
	.o-footer__matrix-content {
		@include oPrivateGridRow();
	}

	.o-footer__matrix-group,
	.o-footer__matrix-column {
		@include oPrivateGridColspan();
	}

	@each $key, $value in $_o-footer-matrix {
		.o-footer__matrix-group--#{$key} {
			@include oPrivateGridColspan(map-get($value, 'group'), $width-only: true);

			.o-footer__matrix-column {
				@include oPrivateGridColspan(map-get($value, 'columns'), $width-only: true);
			}
		}
	}

	.o-footer__matrix-title,
	.o-footer__matrix-link__copy {
		display: block;
	}

	.o-footer__matrix-title {
		margin: 0;
		line-height: inherit;
		font-size: inherit;
		font-weight: 600;

		&[aria-expanded] {
			$line-size: $_o-footer-spacing-unit * 2;

			position: relative;
			border-top: 1px solid;
			line-height: $line-size;
			cursor: pointer;

			&:after {
				content: ' ';
				position: absolute;
				right: 0;
				top: calc((#{$line-size} - #{$_o-footer-icon-size}) / 2);

				@each $theme in $themes {
					.o-footer--theme-#{$theme} & {
						@include oPrivateIconsContent('arrow-down', _oFooterGet('title', $theme), $size: $_o-footer-icon-size);
					}
				}
			}
		}

		&[aria-expanded='true'] {
			&:after {
				// don't download another icon...
				transform: rotate(180deg);
			}
		}
	}

	// I.e. `.o-footer__matrix-title:has(.o-footer__matrix-link)`
	.o-footer__matrix-title--link {
		// Do not hide overflowing focus state for titles which contain links.
		overflow: visible;
		line-height: $_o-footer-spacing-unit * 2;

		border-top: 1px solid;
		@include oPrivateGridRespondTo(M) {
			border-top: 0;
			line-height: initial;
		}
	}

	.o-footer__matrix-content {
		&[aria-hidden='true'] {
			display: none;
		}
	}

	.o-footer__matrix-column {
		margin-top: oPrivateSpacingByName('s4');
		margin-bottom: oPrivateSpacingByName('s4');
	}

	.o-footer__matrix-link {
		padding-top: oPrivateSpacingByName('s2');
		padding-bottom: oPrivateSpacingByName('s2');
		display: block;

		&:first-child {
			padding-top: 0;
		}
	}

	.o-footer__matrix-link--more {
		white-space: nowrap;
		> .o-footer__matrix-link__copy {
			display: inline;
			white-space: normal;
		}
		&:after {
			@include oPrivateIconsContent(
				$icon-name: 'arrow-right',
				$size: $_o-footer-icon-size,
				$color: _oFooterGet('text'),
				$include-base-styles: true
			);
			content: '';
			// Undo in-built icon whitespace.
			position: relative;
			margin: calc(#{$_o-footer-icon-size} / -4);
			vertical-align: baseline;
		}
	}
}
