.header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   z-index: $headerIndex;
   transition:
      background-color 200ms ease,
      box-shadow 200ms ease;

   border-bottom: 1px solid #ffffff66;

   &.sticky {
      position: sticky;
   }

   &__wrapper {
      background-color: transparent;
      color: #ffffff;
      padding: 14px 0;
      transition:
         background-color 200ms ease,
         box-shadow 200ms ease,
         padding 200ms ease;

      @include _Tablet {
         padding: 8px 0;
      }
      @include _XSDesktop {
         padding: 0;
      }
   }

   &__mobile {
      height: 100%;
   }

   &.header--scrolled.header {
      background-color: cl("bg");
      border-bottom: none;
   }

   &__body {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      position: relative;

      @include _XSDesktop {
         gap: 20px;
      }
      @include _HDesktop {
         gap: 24px;
      }
   }

   &__burger {
      padding: 6px 0;

      @include _Tablet {
         padding: 16px 0;
      }
      @include _XSDesktop {
         display: none;
      }
      span {
         display: block;
         border-top: 1px solid #ffffff;
         width: 40px;
         background-color: #ffffff;

         &:first-child {
            width: 32px;
            margin-bottom: 8px;
         }

         @include _Tablet {
            border-top: 2px solid #ffffff;
         }
      }
   }

   &__nav {
      display: none;
      @include _XSDesktop {
         display: flex;
         gap: 24px;
      }

      @include _HDesktop {
         gap: 40px;
      }
   }

   &__logo {
      width: 100px;
      @include _Tablet {
         width: 114px;
         position: absolute;
         left: 50%;
         transform: translateX(-50%);
         top: 50%;
         transform: translate(-50%, -50%);
      }
      @include _XSDesktop {
         width: 124px;
      }
      @include _HDesktop {
         width: 197px;
      }
   }

   &__contacts {
      @include _Tablet {
         margin-left: auto;
      }
   }

   &__btn {
      display: none;

      @include _Tablet {
         display: block;
         font-size: rem(10);
         min-width: 130px;
         padding: 16px;
      }

      @include _XSDesktop {
         font-size: rem(10);
         padding: 16px;
      }
      @include _Desktop {
         font-size: rem(10);
      }

      @include _HDesktop {
         font-size: rem(14);
         min-width: 200px;
         padding: 20px;
      }
   }
}
