@mixin site-menu-fold {
  .site-menu {
    &-category {
      color: transparent;
      text-shadow: none;
      background: $site-menubar-fold-divider-bg;
    }

    > .site-menu-item {

      &.active {
        border-top: none;
        border-bottom: none;
      }
    }
    > .site-menu-item {
      > .site-menu-sub {
        background: $site-menubar-fold-sub-bg;
      }
    }
  }

  .site-menubar-light {
    .site-menu {
      &-category {
        background: $site-menubar-light-fold-divider-bg;
      }

      > .site-menu-item {
        > .site-menu-sub {
          // box-shadow: none;
          // box-shadow: $site-menubar-light-fold-box-shadow;
          background: $site-menubar-light-fold-sub-bg;
          border: 1px solid $site-menubar-light-fold-sub-border-color;
        }
      }
    }
  }
}

@mixin site-menubar-section-fold {
  .site-menubar-section {
    border-top: 2px solid $site-menubar-fold-divider-bg;
    border-bottom: 2px solid $site-menubar-fold-divider-bg;
  }

  .site-menubar-light {
    .site-menubar-section {
      border-top: 2px solid $site-menubar-light-fold-divider-bg;
      border-bottom: 2px solid $site-menubar-light-fold-divider-bg;
    }
  }
}

//.js-menubar {
.site-menubar-fold {
  @include site-menu-fold;
  @include site-menubar-section-fold;
}
//}

// @include media-breakpoint-up(md) {
//   @include media-breakpoint-down(lg) {
@include media-breakpoint-between(md, lg) {
  .css-menubar {
    @include site-menu-fold;
    @include site-menubar-section-fold;
  }
}