%hover {
  color: var(--navbar-active-text-color);
  font-weight: 700;
}
%shadow {
  -webkit-box-shadow: 1px 0 20px rgba(0, 0, 0, 0.08);
  box-shadow: 1px 0 20px rgba(0, 0, 0, 0.08);
}

ui-navbar-menu-item {
  li.active,
  div.active {
    font-size: medium;
    font-weight: 900;
  }
}

.navbar {
  @extend %shadow;
  background: var(--navbar-background);
  height: 100%;
  font-family: $navbar-font-family;
  display: flex;
  flex-direction: column;

  .navbar__menu {
    flex-grow: 1;
    flex-shrink: 1;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-content: space-around;
    gap: 15px;
    .navbar__menu__top,
    .navbar__menu__bottom {
      > ul {
        margin: 0;
      }
    }

    .navbar__btn {
      flex-grow: 0;
      flex-shrink: 0;
      padding-right: 0.5rem;
      margin-bottom: 5px;
      margin-top: 5px;
      .ui-menu-toggle-btn {
        transition: all 0.25s ease;
        i {
          font-size: 30px;
        }
        & > a > i:first-child {
          width: 7px;
        }
        .condensed:not(.ui-navbar-menu-hover) & {
          -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
        }
      }
    }
  }
  li {
    ui-menu-item {
      &:hover {
        i,
        ui-icon,
        span {
          @extend %hover;
        }
      }
      li.active,
      a.active {
        span,
        i,
        ui-icon {
          @extend %hover;
        }
      }
    }
    &.active {
      & > span,
      & > i,
      & > ui-icon {
        @extend %hover;
      }

      & > div.collapsible-header {
        &:before {
          border-style: none solid solid none;
          border-color: transparent var(--navbar-text-color) var(--navbar-text-color) transparent;
          -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
        }
        &:not(.no-content):before {
          -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
        }
        &:hover {
          &:before {
            border-style: none solid solid none;
            border-color: transparent var(--navbar-active-text-color) var(--navbar-active-text-color) transparent;
          }
        }
      }
    }
    div.separator {
      &.blank {
        height: 45px;
      }
      &.line {
        margin: 0 5px;
        border-bottom: 2px solid var(--navbar-separator-color);
      }
    }
    div.collapsible-header {
      height: 45px;
      border: none;
      font-weight: 600;
      background-color: transparent;
      padding: 12px 32px 12px 22px;
      align-items: center;
      ui-icon {
        width: 24px;
        font-size: 18px;
        margin-right: 20px;
      }
      &:hover {
        i,
        span {
          @extend %hover;
        }
        &:not(.no-content):before {
          border-style: solid solid none none;
          border-color: var(--navbar-active-text-color) var(--navbar-active-text-color) transparent transparent;
        }
      }

      .condensed:not(.ui-navbar-menu-hover) & i,
      .condensed:not(.ui-navbar-menu-hover) & ui-icon {
        margin-right: 0;
        &.right {
          margin-left: 5px;
        }
      }

      &:not(.no-content):before {
        content: "";
        position: absolute;
        top: 18px;
        right: 18px;
        width: 8px;
        height: 8px;
        border-style: solid solid none none;
        border-width: 1px;
        border-color: var(--navbar-text-color) var(--navbar-text-color) transparent transparent;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        transition: all 0.25s ease;
      }
      &.no-content > a {
        display: flex;
        justify-content: center;
        align-items: center;
        > span {
          vertical-align: middle;
          display: inline-block;
          .condensed:not(.ui-navbar-menu-hover) & {
            display: none;
          }
        }
      }
      span {
        flex-grow: 1;
        margin-top: auto;
        .condensed:not(.ui-navbar-menu-hover) & {
          display: none;
        }
      }
      i,
      span {
        font-weight: 600;
      }
    }
  }
  ul.collapsible {
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    box-shadow: none;
    color: #607d8b;
    display: inline-block;
    font-size: 14px;
    position: relative;
    width: 100%;
  }
  div.collapsible-body {
    background-color: transparent;
    border: 0;
    padding: 0;
    line-height: 0;
    ui-navbar-menu-item > li {
      padding-left: 80px;
      > a > span {
        line-height: 36px;
      }
      &.sub-group {
        padding-left: 0;
        div.collapsible-header {
          padding-left: 60px;
        }
        & > div.collapsible-body li {
          padding-left: 70px;
        }
      }
      &.sub-group:hover {
        background-color: initial;
      }
    }
  }
}
