_subnavigation.scss

@use 'sass:map';
@use './../color';
@use './../commons';
@use './../spacing';
@use './../../functions/sizing';
@use '../../tokens/utilities';
@use '../../functions/tokens';

tokens.$default-map: utilities.$post-spacing;

// Subnavigation

$subnavigation-background-color: color.$white;
$subnavigation-background-color-alternate: color.$light;

$subnavigation-border-bottom-width: commons.$border-width;
$subnavigation-border-bottom-color: color.$gray-10;

// These heights have to be synchronous to main navigation heights
$subnavigation-height-xs: sizing.px-to-rem(56);
$subnavigation-height-lg: sizing.px-to-rem(64);
$subnavigation-height-xl: sizing.px-to-rem(72);

$subnavigation-link-color: color.$black-alpha-60;
$subnavigation-link-color-hover: color.$black;

$subnavigation-link-underscore-height: tokens.get('utility-gap-4');
$subnavigation-link-underscore-color-active: color.$yellow;
$subnavigation-link-underscore-color-hover: color.$black-alpha-40;

$subnavigation-link-padding-xs: tokens.get('utility-gap-16') tokens.get('utility-gap-12');
$subnavigation-link-padding-lg: tokens.get('utility-gap-20') tokens.get('utility-gap-16');

$subnavigation-result-margin-left: tokens.get('utility-gap-8');