////
/// @group o-header
/// @link http://registry.origami.ft.com/components/o-header
////

/// Base styles for header links
@mixin _oHeaderLink() {
	color: inherit;
	text-decoration: none;
	border: 0;

	&:hover {
		color: _oHeaderGet('link-hover-text');
	}

	&--highlight,
	&[aria-current] {
		color: _oHeaderGet('link-highlight-text');
	}
}

/// More visually decorated link styles
@mixin _oHeaderFancyLink() {
	position: relative;
	display: block;
	padding: $_o-header-padding-y 0;
	white-space: nowrap;

	&:after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 4px;
	}

	&:hover:after {
		background-color: _oHeaderGet('link-hover-text');
	}

	&--highlight:after,
	&[aria-current]:after {
		background-color: _oHeaderGet('link-highlight-text');
	}
}

/// Horizontal list item separator
@mixin _oHeaderItemSeparator() {
	& + & {
		@include _oHeaderItemSeparatorContent();
	}
}

@mixin _oHeaderItemSeparatorContent() {
	$border-width: 1px;

	position: relative;
	margin-left: $_o-header-padding-x - $border-width;
	padding-left: $_o-header-padding-x;

	&:before {
		content: '';
		position: absolute;
		top: 15%;
		left: 0;
		height: percentage($_o-header-item-separator-percentage-height);
		border-left: $border-width solid _oHeaderGet('header-border');
	}
}

/// Calculate logo dimensions for the given breakpoint
///
/// @param {String} $breakpoint - XS, S, M, L or XL
@mixin _oHeaderLogoSize($breakpoint) {
	$image-aspect-ratio: div(25, 2);
	$logo-heights: (
		'XS': 16,
		'S': 20,
		'M': 24,
		'L': 40,
		'XL': 40,
	);
	width: map-get($logo-heights, $breakpoint) * $image-aspect-ratio + 0px;
	height: map-get($logo-heights, $breakpoint) + 0px;
}

/// Construct a logo image URL
///
/// @param {String} $logo-name
/// @param {Color} $color
/// @param {Number} $fallback-width
@mixin _oHeaderBrandImage($logo-name, $color, $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:';
	$color: str-slice(ie-hex-str($color), 4);
	background-image: url($base-url + $logo-name + '?source=#{$system-code}&tint=%23#{$color},%23#{$color}&format=svg');

	// sass-lint:disable no-vendor-prefixes
	@media screen and (-ms-high-contrast: active) {
		background-image: url($base-url + $logo-name + '?source=#{$system-code}&tint=%23ffffff,%23ffffff&format=svg');
	}

	@media screen and (-ms-high-contrast: black-on-white) {
		background-image: url($base-url + $logo-name + '?source=#{$system-code}&tint=%23000000,%23000000&format=svg');
	}
	// sass-lint:enable no-vendor-prefixes
}

/// Base styles for Ask FT button
@mixin _oHeaderAskFtButton() {
	@include oPrivateTypographySans(-1, $weight: 'semibold');
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	color: _oHeaderGet('header-ask-ft-button-text');
	background-color: _oHeaderGet('header-ask-ft-button-background');
	border-radius: 4px;
	text-decoration: none;
	white-space: nowrap;

	&:hover {
		background-color: _oHeaderGet('header-ask-ft-button-background-hover');
	}

	&::before {
		@include oPrivateIconsContent(
			$icon-name: 'sparkles',
			$color: _oHeaderGet('header-ask-ft-button-icon'),
			$size: 32
		);
		content: '';
		margin: -10px; // Undo in-built icon whitespace.
	}
}

@mixin _oHeaderPrimaryLink() {
	font-weight: 600;
	text-transform: uppercase;
	// sass-lint:disable no-vendor-prefixes
	-webkit-font-smoothing: antialiased;
	// sass-lint:enable no-vendor-prefixes
}