$header-top-font-size: 12px;
$header-border: 1px solid $border-color !default;
$header-burger-bg: $white !default;
$header-burger-color: $black !default;
$header-burger-border: 1px solid $border-color;

@media screen and (max-width: $md - 1) {
   .infopanel-wrapper-header {
      display: flex;
      flex-direction: column;

      .infopanel {
         order: 2;
         margin-bottom: 10px;
      }
   }
}

.header {
   z-index: 10;
   position: sticky;
   height: 125px;
   top: -125px;

   > .container-fluid {
      height: 83px;
      justify-content: space-between;
      align-items: center;
      max-width: 1420px;
   }

   .logo {
      min-width: 105px;
   }

   &.is-stuck {
      top: 0;
      left: 0;
      height: 83px;
      box-shadow: 0 5px 13px rgba(0, 0, 0, .06);
      position: fixed;
      width: 100%;
      z-index: 100;
      transition: top $transition-speed;
      background-color: $white;

      + .header-sticky-helper {
         min-height: 125px;
      }

      .header-top {
         display: none;
      }

      > .container {
         height: 83px;
         align-items: center;
         padding-top: 0;
      }
   }

   @media screen and (max-width: $xxl - 1) {
      .logo {
         margin-left: 0;
      }
   }

   @media screen and (min-width: $lg - 1) {
      .header-burger {
         display: none;
      }
   }

   @media screen and (max-width: $lg - 1) {
      height: 85px;
      top: -85px;

      &.is-stuck {
         height: 80px;

         + .header-sticky-helper {
            min-height: 85px;
         }

         > .container {
            height: 80px;
         }
      }

      > .container-fluid {
         padding-left: 80px;
      }
   }

   @media screen and (max-width: $sm - 1) {
      height: 65px;
      top: -65px;

      &.is-stuck {
         height: 65px;

         + .header-sticky-helper {
            min-height: 65px;
         }

         > .container {
            height: 65px;
         }
      }

      > .container-fluid {
         height: 65px;
      }
   }
}

.header-burger {
   display: none;
   position: absolute;
   left: 5px;

   button {
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: none;
      background: $header-burger-bg;
      color: $header-burger-color;
      position: relative;
      cursor: pointer;
   }

   .fc {
      font-size: 20px;
      margin: 0;
   }
}

@media screen and (max-width: $lg - 1) {
   .header {
      .logo {
         padding-right: 20px;
      }
   }

   .header-burger {
      display: flex;

      button {
         width: 53px;
      }
   }

   .header-top {
      display: none;
   }
}

@media screen and (max-width: $md - 1) {
   .header {
      > .container-fluid {
         padding-left: 75px;
      }
   }

   .header-burger {
      display: flex;

      button {
         width: 48px;
      }
   }
}

.homepage-header {
   border-bottom: 0;
   margin-bottom: 0;
}
