// DS2 top nav variables
$bgColour: $color-black;
$fgColour: $color-white;
$highlightColour: $color-brand-vivid-yellow;
$searchBorderColour: $color-black--light;
$desktopBreakpoint: 80rem;

$barPaddingTop: 32px;
$barPaddingBottom: 24px;
$barPaddingInline: 24px;
$logoPadding: 24px;
$crestWidth: 43.49px;
$crestHeight: 42.74px;
$barHeight: $barPaddingTop + $logoPadding * 2 + $crestHeight + $barPaddingBottom;

$iconButtonSize: 40px;
$menuButtonSize: 48px;
$searchIconSize: 20px;
$closeIconSize: 26px;
$burgerWidth: 24px;
$burgerHeight: 12px;

$searchHeight: 60px;
$searchGapInline: 12px;
$searchRadius: 4px;
$linkFontSize: 1rem;
$linkLineHeight: 1.5;
$rowHeight: 60px;
$rowGap: $spacing-1;
$listPaddingBottom: $spacing-6;

$childRowHeight: 56px;
$backHeight: 60px;
$slideDuration: 0.3s;
$searchMaxWidth: 480px;
$listMaxWidth: 480px;

$searchSlideDuration: 0.4s;
$searchSlideEndWidth: unquote("min(530px, calc(100vw - #{$barPaddingInline * 2 + $iconButtonSize + $searchGapInline * 2 + $menuButtonSize}))");

// Arrows use borders so they stay visible in forced colours.
$arrowWidth: 13px;
// Arrow spacing is tuned to the design measurements.
$arrowGap: $spacing-4;
$arrowStroke: 2px;
$arrowHeadSize: 8px;

// Desktop values match the legacy DS2 header styling.
$desktopBarHeight: 80px;
$desktopMaxWidth: 1400px;
$desktopPaddingInline: $spacing-4;
$desktopLogoHeight: 34px;
// Desktop nav spacing narrows toward 1280px so it still fits beside the open search box.
$desktopLinkPaddingFluid: unquote("clamp(10px, calc(2.5vw - 20px), #{$spacing-4})");
// Desktop spacing between logo, nav, and search.
$desktopColumnGap: $spacing-4;
$desktopRowHeight: 52px;
$desktopLevel2Width: 33%;
// Open desktop search fills the space left by the nav links.
$desktopSearchMaxWidth: 800px;

$focusOutlineWidth: 2px;
$focusOutlineOffset: 2px;
$menuZIndex: 100;
$seamOverlap: 1px;
$noJsIndent: 24px;