//-- nav
.topbar__navigation {
  @include set-col(s, 4);
  @include set-col(md, 7);

  position  : relative;
  z-index   : 0;

  transition: transform .3s ease;

  @include media-max(lg) {
    background: $lightgrey;
    height    : calc(100vh - 40px);
    width     : calc(100vw - 40px);

    position  : absolute;
    top       : 20px;
    left      : 20px;

    transform : translateY(calc(-100% - 20px));

    border    : 3px solid $black;
  }

  @include media-min(lg) {
    margin-left    : auto;

    display        : flex;
    flex-wrap      : wrap;
    justify-content: flex-end;
    align-items    : center;
  }

  ul {
    list-style: none;
    margin    : 0;
  }

  .isActive & {
    transform: translate(0,0);
  }
}

.topbar__navigation {
  display        : flex;
  flex-wrap      : wrap;
  justify-content: center;
  align-items    : center;

  .sub-menu {
    min-width: 200px;
  }

  .topbar__menu {

    @include media-min(lg) {
      display        : flex;
      flex-wrap      : wrap;
      justify-content: center;
      align-items    : center;
    }

    > li {

      @include media-max(lg) {
        flex: 1 100%;
      }
      @include media-min(lg) {
        margin-right: 30px;
      }

      &:last-child {
        margin-right: 0;
      }
    }

    a {
      @include rem-size(12);
      font-weight    : 400;
      text-transform : uppercase;

      padding        : 10px 15px;

      color          : $black;

      width          : 100%;

      position       : relative;
      display        : inline-block;

      display        : flex;
      flex-wrap      : wrap;
      justify-content: space-between;
      align-items    : center;

      @include media-max(lg) {
        text-align    : center;

        @include rem-size($h4_fontSize);

        font-family   : $h4_fontFamily;
        font-style    : $h4_fontStyle;
        font-weight   : $h4_fontWeight;
        color         : $h4_color;
        text-transform: $h4_textTransform;
        margin-bottom : 20px;
        display       : block;
        line-height   : $h4_lineHeight;
      }

    }

  }

}

.menu-item-has-children {

  @include media-min(lg) {
    position: relative;

    > a:after {
      content    : '';
      @include triangle('bottom', $black, 4px, 4px);
      margin-left: 15px;
      transition : transform .3s ease;

    }

    &:focus,
    &:hover {
      > .sub-menu {
        pointer-events: auto;
        opacity       : 1;
        transform     : translateY(0);
      }

      > a:after {
        transform: rotate(180deg);
      }
    }

  }

}

.sub-menu {
  margin-left: 0;

  border     : 2px solid black;

  @include media-min(lg) {
    background    : $white;
    position      : absolute;
    top           : 100%;
    left          : 0;

    pointer-events: none;
    opacity       : 0;
    transform     : translateY(10px);

  }

  li {
    a {
      width      : 100%;

      @include rem-size(14);
      font-weight: 400;

      padding    : 10px;
    }

    &:focus,
    &:hover {
      > a:after {
        transform: rotate(-90deg);
      }
    }
  }

  .sub-menu {
    top : 0;
    left: 100%;
  }
}