// --- Header Variables ---


// -- White Header --

// - Regular White Header

@headerBrandImageSpacing: @lapAndUpSpacingS;
@headerBrandClaimWidth:   15em;

@headerVerticalPaddingPalm: @palmSpacingM;
@headerVerticalPaddingLap:  @headerVerticalPaddingPalm;
@headerVerticalPaddingDesk: @lapAndUpSpacingM;

@headerBrandImageSmallWidth:    64px;
@headerBrandImageSmallHeight:   32px;
@headerBrandClaimSmallFontSize: 1.2rem;

@headerBrandImageLargeWidth:    112px;
@headerBrandImageLargeHeight:   56px;
@headerBrandClaimLargeFontSize: 1.8rem;


// - Composite White Header

@headerBrandImageWidthPalm:    64px;
@headerBrandImageHeightPalm:   32px;
@headerBrandClaimFontSizePalm: @palmFontSizeXS;

@headerBrandImageWidthLap:    @headerBrandImageWidthPalm;
@headerBrandImageHeightLap:   @headerBrandImageHeightPalm;
@headerBrandClaimFontSizeLap: @lapAndUpFontSizeXS;

@headerBrandImageWidthDesk:    80px;
@headerBrandImageHeightDesk:   40px;
@headerBrandClaimFontSizeDesk: @lapAndUpFontSizeStandard;


// - Height of the White Header (necessary for computations)

@headerHeightPalm: (@headerBrandImageHeightPalm + (2 * @headerVerticalPaddingPalm));
@headerHeightLap:  (@headerBrandImageHeightLap +  (2 * @headerVerticalPaddingLap));
@headerHeightDesk: (@headerBrandImageHeightDesk + (2 * @headerVerticalPaddingDesk));


// -- Top Navigation --

// - Top Navigation Slide-in / Tab Configuration
@breakpointTopNavigationWithTabsMin:             768px; // Set this variable to determine where the slide-in navigation should end and the tab navigation begin // todo: should this be 758 because of scroll bars?
@breakpointTopNavigationWithTabsAndDeskStateMin: max(@breakpointTopNavigationWithTabsMin, @breakpointDeskMin);
@breakpointTopNavigationWithSlideInMax:          (@breakpointTopNavigationWithTabsMin - 1px); // Slide-in navigation for anything below the configured threshold

// Media queries to target slide-in or tab navigation
@mediaQueryTopNavigationWithTabs:               ~"(min-width: @{breakpointTopNavigationWithTabsMin})";
@mediaQueryTopNavigationWithTabsAndDeskState:   ~"(min-width: @{breakpointTopNavigationWithTabsAndDeskStateMin})";
@mediaQueryTopNavigationWithSlideIn:            ~"(max-width: @{breakpointTopNavigationWithSlideInMax})";
@mediaQueryTopNavigationWithSlideInAndLapState: ~"(min-width: @{breakpointLapMin}) and (max-width: @{breakpointTopNavigationWithSlideInMax})";


// - Top Navigation Bar Dimensions

@topNavigationHeight:          48px;
@topNavigationTopPadding:      10px;
@topNavigationLevelOneSpacing: 2px;


// - Top Navigation Tabs
// (Bottom paddings are used to pull the tabs to the bottom edge of the top navigation bar.)

@topNavigationTabPaddingTop: 6px;
@topNavigationTabPaddingBottomPalm: round(@topNavigationHeight - @topNavigationTopPadding - @topNavigationTabLabelHeightPalm);
@topNavigationTabPaddingBottomLap:  round(@topNavigationHeight - @topNavigationTopPadding - @topNavigationTabLabelHeightLap);
@topNavigationTabPaddingBottomDesk: round(@topNavigationHeight - @topNavigationTopPadding - @topNavigationTabLabelHeightDesk);


// - Top Navigation Tab Labels

// Tab Label Font Sizes
@topNavigationTabLabelFontSizePalm: @palmFontSizeStandard;
@topNavigationTabLabelFontSizeLap:  @lapAndUpFontSizeS;
@topNavigationTabLabelFontSizeDesk: @lapAndUpFontSizeStandard;
@topNavigationTabLabelFontSizePalmAbsolute: (unit(@topNavigationTabLabelFontSizePalm) * 10); // for computations
@topNavigationTabLabelFontSizeLapAbsolute:  (unit(@topNavigationTabLabelFontSizeLap) * 10); // for computations
@topNavigationTabLabelFontSizeDeskAbsolute: (unit(@topNavigationTabLabelFontSizeDesk) * 10); // for computations

// Tab Paddings
@topNavigationTabLabelPaddingTop:              8px;
@topNavigationTabLabelPaddingLeftAndRightLap:  7px;
@topNavigationTabLabelPaddingLeftAndRightDesk: 12px;
@topNavigationTabLabelPaddingBottom:           7px;

// Computed Total Height of Tabs
@topNavigationTabLabelHeightPalm: (@topNavigationTabLabelPaddingTop + @topNavigationTabLabelFontSizePalmAbsolute + @topNavigationTabLabelPaddingBottom);
@topNavigationTabLabelHeightLap:  (@topNavigationTabLabelPaddingTop + @topNavigationTabLabelFontSizeLapAbsolute  + @topNavigationTabLabelPaddingBottom);
@topNavigationTabLabelHeightDesk: (@topNavigationTabLabelPaddingTop + @topNavigationTabLabelFontSizeDeskAbsolute + @topNavigationTabLabelPaddingBottom);


// - Top Navigation Login Tab

// Modifier for vertical paddings on login tab - positive value will move the label down, negative value up
@topNavigationLoginTabPaddingModifier: 1px;

// Login label offsets to balance displacement due to welcome message
@topNavigationTabAvatarTopOffset: -2px;
@topNavigationTabWelcomeMessageBottomOffset: 2px;
@topNavigationTabWelcomeMessageMaxWidthSlideInPalm: 14em;
@topNavigationTabWelcomeMessageMaxWidthSlideInLap:  27em;
@topNavigationTabWelcomeMessageMaxWidthTabsLap:     6em;
@topNavigationTabWelcomeMessageMaxWidthTabsDesk:    10em;


// - Top Navigation Layers

@topNavigationTabLayerBackgroundColor: @white;


// - Slide-in Navigation

@mobileNavigationWidthPalm: 250px;
@mobileNavigationWidthLap:  400px;

@topNavigationSlideInTransitionDuration: 200ms;

// Hover Tabs
@topNavigationHoverTabZIndex: @fixToTopZIndex;

@topNavigationHoverTabTransitionDelay:    200ms;
@topNavigationHoverTabTransitionDuration: 0ms;