// -----------------------------------------------------------------------------
// This file contains all styles related to the header of the site/application.
// -----------------------------------------------------------------------------

$header-fixed: true !default;
$header-background: #fff !default;
$header-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !default;

$logo-width: 160px !default;
$logo-height: 50px !default;
$logo-tablet-width: 220px !default;
$logo-tablet-height: 80px !default;
$logo-vertical-margin: 10px !default;

@if ($header-fixed == true) {
    .main-wrapper {
        padding-top: $logo-vertical-margin * 2 + $logo-height;
        @include media(">=medium") {
            padding-top: $logo-vertical-margin * 2 + $logo-tablet-height;
        }
    }
}

header.header {
    background: $header-background;
    box-shadow: $header-shadow;

    @if ($header-fixed == true) {
        position: fixed;
        width: 100%;
        left: 0;
        top: 0;
        z-index: 100;
    }

    .logo {
        margin: $logo-vertical-margin 0;
        display: inline-block;
        position: relative; // used for layout="fill" in <amp-image> element

        width: $logo-width;
        height: $logo-height;

        @include media(">=medium") {
            width: $logo-tablet-width;
            height: $logo-tablet-height;
        }

        img {
            object-fit: scale-down;
        }

        // ------------------------------------------------------------------
        // wait for attr(data-image-src url) support, to set background image
        // ------------------------------------------------------------------
        // &::before {
        //     display: inline-block;
        //     vertical-align: bottom;
        //     background-image: attr(data-image-src url);
        //     background-repeat: no-repeat;
        //     background-size: contain;
        //     content: '';
        //     width: 145px;
        //     height: 50px;
        // }
    }
}