@use '@justeat/fozzie/src/scss/fozzie' as f;
@forward './navigation.scss';


/**
 * Imports
*/
@include f.trumps-rwd();


/**
 * Component Variables
 */
$header-logo-color                 : f.$color-support-brand-01;
$header-logo-color--alt            : f.$color-interactive-inverse;

$header-height--narrow              : 56px;
$header-button--height              : $header-height--narrow;
$header-button--width               : 56px;
$header-height                      : 80px;
$header-bg                          : f.$color-container-default;
$header-box-shadow                  : f.$elevation-04;
$header-buttonIcon-color            : f.$color-interactive-primary;
$header-buttonFocus-borderRadius    : 800px;

$header--transparent-gradient-color : f.$color-black;
$header--transparent-gradient       : 115px;
$header--transparent-opacity        : 0.7;


// removes scroll
.is-navInView {
    @include f.media('<=mid') {
        overflow: hidden;

        body {
            position: fixed;
            width: 100%;
            padding-top: $header-height--narrow;
        }
    }
}

// If the header is already fixed/absolute (like when the header is transparent)
// then the content doesn't need to be padded down when the nav comes into view, as it's already flush with the top of the screen
// This is added in the f-header JS
.is-navInView--noPad {
    body {
        padding-top: 0;
    }
}

