$menu-item-color: $grey-darker !default;
$menu-item-radius: $radius-small !default;
$menu-item-hover-color: $primary !default;
$menu-item-hover-background-color: $background !default;
$menu-item-active-color: $primary !default;
$menu-item-active-background-color: $primary !default;
$menu-label-color: $text-light !default;

.sidebar {
  will-change: min-height;
}

.sidebar__inner {
  transform: translate(0, 0);
  transform: translate3d(0, 0, 0);
  will-change: position, transform;
}

.sgds-menu {
  &-list {
    margin: 0;
    list-style-type: none;

    .content & {
      list-style: none;
    }

    a {
      color: $menu-item-color;
      display: flex;
      font-size: $size-menu;
      justify-content: space-between;
      align-items: center;
      padding: 0.75rem 0;
      /*border-bottom: 1px solid $grey;
      this gives a extra border bottom for side nav*/

      .sgds-icon {
        font-size: $size-menu-icon;
      }

      &:hover {
        color: $menu-item-active-color;
        /*border-bottom: 1px solid $menu-item-active-color;
        this is gives a extra border bottom for side nav on hover*/
      }

      &.is-active {
        color: $menu-item-active-color;
        font-weight: 600;
        border-color: $menu-item-active-color;
        border-bottom: 2px solid $menu-item-active-color;
      }

      &.second-level-nav-header {
        border-bottom: 1px solid white !important;

        &.is-active, &:hover, &.is-active:hover {
          border-bottom: 1px solid white !important;
        }
      }
    }

    li {
      font-size: $size-6;
      line-height: 2rem;
      margin: 0;

      &.second-level-nav-header {
        &.is-active + div.second-level-nav-div {
          display: block;
          visibility: visible;

          &.is-hidden {
            display: none;
            visibility: hidden;
          }
        }

        &:active + div.second-level-nav-div,
        &:hover + div.second-level-nav-div {
          display: block;
          visibility: visible;
        }

        &:active + div.second-level-nav-div.is-hidden,
        &:hover + div.second-level-nav-div.is-hidden {
          display: none;
          visibility: hidden;
        }
      }

      a.second-level-nav-item {
        border: 0 !important;
        padding-left: 1.5rem;
        padding-top: 0;
      }

      &:not(:first-child) a {
        border-top: 1px solid #767676;
      }
    }

    &-label {
      color: #767676;
      font-size: 0.75em;
      letter-spacing: 0.1em;
      text-transform: uppercase;

      &:not(:first-child) {
        margin-top: 1em;
      }

      &:not(:last-child) {
        margin-bottom: 1em;
      }
    }
  }
}

.sgds-menu{
  &.variant-simple{
    .sgds-menu-list{
      li:not(:first-child) a{
        border: none;
      }

      a{
        padding-top: 0;
        padding-bottom: 0;
      }
    }
  }
}