.navbar {
  border-top: thin solid #ececec;

  @include media('tablet-m') {
    display: none;
  }

  &__inner {
    @extend %container;

    position: relative;
    display: flex;
    min-height: 62px;

    @include media('tablet-l') {
      min-height: 60px;
    }
  }

  &__item {
    flex: 1;

    &.item-kharza {
      font-weight: bold;
      color: #1db19b;
    }

    &-arrow {
      display: flex;
      margin-left: 15px;
    }

    &:hover {
      background-color: #18b09b;
      color: #fff;

      .navbar__item-arrow {
        transform: rotate(-180deg);

        svg {
          path {
            stroke: #fff;
          }
        }
      }
    }

    &.active {
      background-color: #18b09b;
      color: #fff;

      .navbar__item-arrow {
        transform: rotate(-180deg);

        svg {
          path {
            stroke: #fff;
          }
        }
      }
    }
  }

  &__list--catalog {
    padding: 30px 15px;
    border-radius: 0 0 20px 20px;
    background: #fff;
    box-shadow: 0 15px 30px 0 rgba(31, 103, 159, 0.08);
    position: absolute;
    z-index: 2;
    display: flex;
    top: 100%;
    max-width: 1170px;
    opacity: 0;
    pointer-events: none;

    &.full-width {
      left: 55px !important;
      right: 55px !important;

      @include media('tablet-l') {
        left: 20px !important;
        right: 20px !important;
      }
    }

    &:hover {
      opacity: 1;
      pointer-events: all;
    }

    &.active {
      opacity: 1;
      pointer-events: all;
    }
  }

  &__list-item {
    flex: 1;
    padding: 0 15px;
    max-width: 234px;

    .n-item {
      width: 100%;
      position: relative;
      color: #222;
      margin: 0;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      > a {
        font-weight: 600;
        line-height: 18px;
      }

      &:hover {
        .n-item-submenu {
          opacity: 1;
          pointer-events: all;
        }
      }
    }

    .n-item-submenu {
      position: absolute;
      width: 100%;
      background: #fff;
      left: 100%;
      top: 0;
      padding: 20px;
      opacity: 0;
      pointer-events: none;
      box-shadow: 20px 12px 30px 0 rgba(31, 103, 159, 0.08);
    }

    .n-item-arrow {
      transform: rotate(270deg);
      pointer-events: none;
    }

    ul {
      margin: 0;
      @include reset-list;

      li {
        margin-bottom: 15px;

        a {
          display: block;
          font-size: 16px;
          line-height: 18px;
          color: #222;
        }

        .active {
          color: #1db09a;
        }

        &:hover {
          a {
            color: #1db09a;
          }
        }

        &:last-of-type {
          margin-bottom: 0;
        }
      }
    }

    &:last-of-type {
      border-right: none;
    }
  }

  &__item--catalog {

    &:hover {
      + .navbar__list--catalog-1 {
        opacity: 1;
        pointer-events: all;
      }

      + .navbar__list--catalog-2 {
        opacity: 1;
        pointer-events: all;
      }
    }
  }

  &__link {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    span {
      display: flex;
      align-items: center;
      font-size: 18px;
      font-weight: 400;
      line-height: 22px;
    }
  }
}