.vh-primary-menu {
  flex-direction: column;
  @include lg-screen {
    flex-direction: row;
  }

  &__list {
    position: relative;
    @include lg-screen {
      margin-right: 1.5rem;
      &:last-child {
        margin-right: 0;
      }
    }
    @include xl-screen {
      margin-right: 2rem;
    }
    &.has-sub {
      &:hover {
        .vh-primary-menu__link {
          @include lg-screen {
            color: $primary;
          }
          &::after {
            @include lg-screen {
              content: "\ea57";
            }
          }
        }
        .vh-primary-menu__sub {
          @include lg-screen {
            top: 100% !important;
            visibility: visible !important;
            opacity: 1 !important;
            height: auto !important;
            z-index: 9999 !important;
          }
        }
      }
      .vh-primary-menu__link {
        &::after {
          content: "\ea4a";
          font-family: boxicons !important;
          font-weight: 400;
          font-style: normal;
          font-variant: normal;
          line-height: 1;
          text-rendering: auto;
          display: inline-block;
          text-transform: none;
          -webkit-font-smoothing: antialiased;
          position: absolute;
          right: 15px;
          font-size: 22px;
          @include lg-screen {
            right: -24px;
            top: 10px;
          }
        }
      }
    }
  }
  &__link {
    display: block;
    padding-top: 8px;
    padding-bottom: 8px;
    margin-left: 15px;
    margin-right: 15px;
    border-bottom: 1px solid rgba($dark, 0.1);
    text-decoration: none;
    transition: all 0.3s ease;
    font-family: $heading-font;
    color: $dark;
    @include lg-screen {
      color: $white;
      margin-left: 0;
      margin-right: 0;
      font-size: 18px;
      border-bottom: none;
    }
    &:hover {
      color: $primary;
      text-decoration: none;
    }
  }
  &--alt {
    padding-top: 1rem;
    padding-bottom: 1rem;
    @include lg-screen {
      padding-top: 0;
      padding-bottom: 0;
    }
    .vh-primary-menu__list {
      margin-bottom: 0.5rem;
      @include lg-screen {
        margin-bottom: 0;
      }
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  &__sub {
    list-style: none;
    padding: 0;
    margin-left: 15px;
    margin-right: 15px;
    z-index: -9999;
    visibility: hidden;
    opacity: 0;
    height: 0;
    transition: all 0.3s ease;
    @include lg-screen {
      min-width: 200px;
      height: auto;
      padding: 15px;
      position: absolute;
      left: 50%;
      top: calc(100% + 20px);
      transform: translateX(-50%);
      margin-left: 0;
      margin-right: 0;
      background: $white !important;
      border-radius: 5px;
      &::after {
        content: "";
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid transparent;
        border-bottom: 10px solid $white;
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
    &-list {
      border-bottom: 1px solid rgba($primary, 0.9);
      @include lg-screen {
        border-bottom: 1px solid $border;
        &:hover {
          border-bottom: 1px solid transparent;
        }
      }
      &:first-child {
        .vh-primary-menu__sub-link {
          border-radius: 5px 5px 0 0;
        }
      }
      &:last-child {
        border-bottom: none;
        .vh-primary-menu__sub-link {
          border-radius: 0 0 5px 5px;
        }
      }
    }
    &-link {
      display: block;
      padding: 8px 15px;
      background: $primary;
      font-family: $heading-font;
      color: $white;
      transition: all 0.3s ease;
      position: relative;
      @include lg-screen {
        background: $white;
        color: $heading-text;
        border-radius: 5px !important;
      }
      &:hover {
        color: $white;
        @include lg-screen {
          color: $white;
          background: $primary;
        }
      }
    }
  }
}
