.header {
  background: $darkFade;
  position: fixed;
  width: 100%;
  z-index: 10;
  top: 0;
  transition: .4s ease;

  .container {
    @include breakpoint-down('deskL') {
      width: 1180px;
    }

    @include breakpoint-down('deskM') {
      width: 940px;
    }

    @include breakpoint-down('deskS') {
      width: 688px;
      padding: 0;
    }

    @include breakpoint-down('tabM') {
      width: 100%;
      padding-left: 20px;
      padding-right: 20px;
    }
  }

  &__logo {
    margin: 21.24px 0;

    @include breakpoint-down('deskS') {
      margin: 0;
    }
  }

  &__span {
    position: absolute;
    left: 0;
    right: 0;
    top: 49px;
    bottom: 0;
    width: 100%;
    height: 100%;
    max-height: 0;
    background: $white;
    //transform: translateY(-100%);
    transition: .4s ease;
    z-index: -1;

    @include breakpoint-down('deskS') {
      top: 38px;
    }

    @include breakpoint-down('tabM') {
      top: 0;
    }
  }

  &__list {
    height: 86px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;

    @include breakpoint-down('deskS') {
      height: 60px;
    }
  }

  &__item {
    display: flex;

    @include breakpoint-down('deskS') {
      &:first-of-type {
        flex: 1;
      }
    }

    &_lang {
      opacity: 0;
      pointer-events: none;

      @include breakpoint-down('deskS') {
        margin-right: 86px;
        display: none;
      }
    }

    &_disable {
      @include breakpoint-down('deskS') {
        display: none;
      }
    }

    .dropdown {
      margin-right: 40px;
      padding: 30px 0;

      @include breakpoint-down('deskS') {
        padding: 0;
      }
    }
  }

  &_white {

    .lang__text {
      color: $primary;
    }

    .logo {
      background-image: url("../assets/resource/logo-black.svg");
    }

    .dropdown {

      &__text {
        color: $primary;
      }

      &__list {
        background: #f5f5f5;
      }

      &_active {
        .dropdown {

          &__text {
            color: $primary50;
            transition: .4s ease;

            &:hover {
              color: $primary;
              transition: .4s ease;
            }
          }
        }
      }

      &_open {
        .dropdown {

          &__text {
            color: $primary;
            transition: .4s ease;
          }
        }
      }
    }
  }

  &_ghost {
    background: transparent;

    .lang__text {
      color: $primary;
    }

    .logo {
      background-image: url("../assets/resource/logo-black.svg");
    }

    .dropdown {

      &__text {
        color: $primary;
      }

      &__list {
        background: #f5f5f5;
      }

      &__link {
        color: $primary !important;

        &:hover {
          .dropdown__link {
            color: $primary50 !important;
          }

          color: $primary50 !important;
          transition: .4s ease;
        }
      }

      &_active {
        .dropdown {

          &__text {
            color: $primary50 !important;
            transition: .4s ease;

            &:hover {
              color: $primary !important;
              transition: .4s ease;
            }
          }
        }
      }

      &_open {
        .dropdown {

          &__text {
            color: $primary !important;
            transition: .4s ease;
          }
        }
      }
    }

    &.header_white {
      .header__span {
        //transform: translateY(0);
        transition: .4s ease;
        max-height: calc(100% - 50px);

        @include breakpoint-down('deskS') {
          max-height: calc(100% - 38px);
        }

         @include breakpoint-down('tabM') {
           max-height: 100%;
         }
      }
    }
  }

  &.header_white {
    .header__span {
      //transform: translateY(0);
      transition: .4s ease;
      max-height: calc(100% - 50px);

      @include breakpoint-down('deskS') {
        max-height: calc(100% - 38px);
      }

       @include breakpoint-down('tabM') {
         max-height: 100%;
       }
    }
  }

  //&.hideTabs {
  //  top: -50px;
  //
  //  .header__span {
  //    top: 0;
  //    max-height: (100%);
  //  }
  //
  //  .dropdown__list {
  //    top: 85px;
  //  }
  //}
}


.headerTabs {
  background: rgba(255, 255, 255, 0.15);

  @include breakpoint-down('tabM') {
    display: none;
  }

  .headerTabsWrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;

    @include breakpoint-down('tabM') {
      margin-left: -20px;
      width: calc(100% + 20px * 2);
    }
  }

  .headerTabsItems {
    display: flex;
    align-items: center;
  }

  .headerTabsItem {
    font-size: 15px;
    font-weight: 600;
    line-height: 21px;

    @include breakpoint-down('deskL') {
      font-size: 14px;
      line-height: 20px;
    }

    @include breakpoint-down('deskS') {
      font-size: 12px;
      line-height: 13px;
    }

    padding: 14px 25px 14px 25px;
    position: relative;

    @include breakpoint-down('deskL') {
      padding: 15px 21px 15px 25px;
    }

    @include breakpoint-down('deskS') {
      padding: 13px 24px 13px 24px;
    }

    @include breakpoint-down('tabM') {
      padding: 15px 36px;
      width: calc(100% / 2);
    }

    &:last-of-type {
      transition: .4s ease-in-out;
      color: rgba(255, 255, 255, 0.3);
      border-left: 2px solid transparent;

      &:hover {
        color: rgba(255, 255, 255, 1);
      }
    }

    &.active {
      color: rgba(255, 255, 255, 1);

      @include breakpoint-down('tabM') {
        background: rgba(255, 255, 255, 1);
      }

      &:after {
        content: '';
        position: absolute;
        height: 2px;
        width: 100%;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(230, 35, 52, 1);

        @include breakpoint-down('tabM') {
          bottom: auto;
          top: 0;
        }
      }
    }
  }

  :global(.headerTabsLang) {
    height: 50px;

    @include breakpoint-down('deskS') {
      height: 40px;
    }
  }

  :global(.headerTabsLang .lang__btn) {
    padding: 14px 0;

    @include breakpoint-down('deskS') {
      padding: 9px 0;
    }
  }
}

.header_white {
  .headerTabs {
    background: rgba(242, 246, 249, 1);

    .headerTabsItem {
      &:last-of-type {
        color: rgba(50, 50, 50, 0.3);
        border-left: 2px solid rgba(255, 255, 255, 1);

        &:hover {
          color: rgba(20, 20, 20, 1);
        }
      }

      &:first-of-type {
        color: rgba(20, 20, 20, 1);
      }
    }
  }
}