$sideBarWidth: 200px;
$sideBarWidthCollapsed: 50px;
$backgroundColor: #2A3A49;
$iconMargin: 1rem;
$liLineHeight: 2.25rem;
$menuHoverBackgroundColor: rgba(0, 0, 0, .1);
$menuTitleOpacity: .75;

.sidebar-menu-item__popup {
  font-size: inherit !important;
  font-weight: inherit !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .15) !important;
  background-color: rgba(0, 0, 0, .87) !important;
  padding: 0 !important;

  .sidebar-menu-item__popup-content {
    margin: 0;
    padding: 1em;
    list-style: none;

    li {
      cursor: pointer;
      display: grid;
      grid-template-columns: 8fr auto;
      line-height: $liLineHeight;
      column-gap: 1.5em;

      span {
        &:first-child {
          opacity: $menuTitleOpacity;
        }
      }

      &:hover {
        span {
          &:first-child {
            opacity: 1;
          }
        }
      }
    }
  }
}

.next-ui-sidebar {
  font-size: small;
  width: $sideBarWidth;
  background: $backgroundColor;
  color: #fff;
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
  overflow-y: auto;

  .next-ui-sidebar__logo {
    padding: 1em 0;
    position: fixed;
    top: 0;
    left: 0;
    margin-bottom: 1em;
    background: $backgroundColor;
    z-index: 1;
  }

  .next-ui-sidebar__menu-list {
    margin-top: 4em;
    margin-bottom: 3em;
    width: 100%;
    overflow-x: hidden;
  }

  .next-ui-sidebar__menu-footer {
    position: fixed;
    bottom: 0;
    width: $sideBarWidth;
    background: $backgroundColor;
    left: 0;
    text-align: center;
    .button.basic {
      border: 0 !important;
      box-shadow: none !important;
      .icon {
        color: #fff;
        opacity: $menuTitleOpacity;
      }
      &:hover, &:focus {
        background: none !important;
        .icon {
          opacity: 1;
        }
      }
    }
  }

  ul {
    padding: 0;
    margin: 0;
    display: grid;

    li {
      line-height: $liLineHeight;
      display: grid;
      grid-template-columns: auto 8fr 1fr 35px;
      grid-template-areas: "icon title indicator caret" "sub-menu sub-menu sub-menu sub-menu";

      &:hover {
        background-color: $menuHoverBackgroundColor;
      }

      .sidebar-menu-item__content {
        max-height: 0;
        transition: max-height .5s ease-out;
        overflow: hidden;
        grid-column: span 4;
        grid-area: sub-menu;

        ul {
          li {
            padding-left: $iconMargin * 2;
            margin: 0;
          }
        }

        &.active {
          max-height: 500px;
          display: initial;
        }
      }

      .sidebar-menu-item__icon,
      .sidebar-menu-item__logo {
        line-height: inherit;
        margin-left: $iconMargin;
        text-align: center;

        i.icon {
          color: #69bf9d !important;
          margin-right: $iconMargin;
        }
      }

      .sidebar-menu-item__icon {
        grid-area: icon;
      }

      .sidebar-menu-item__logo {
        margin-left: $iconMargin - 0.25;

        div {
          margin-right: $iconMargin - 0.5;
        }
      }

      .sidebar-menu-item__header {
        padding-left: $iconMargin;
        grid-column: span 4;
        opacity: .6;
        font-size: 90%;
        font-weight: 400;
        background: $backgroundColor;
      }

      .sidebar-menu-item__title {
        opacity: $menuTitleOpacity;
        font-weight: 500;
        grid-area: title;
      }

      .sidebar-menu-item__caret {
        padding-left: $iconMargin / 2;
        padding-right: $iconMargin / 2;
        grid-area: caret;
      }

      .sidebar-menu-item__indicator {
        grid-area: indicator;

        .label {
          font-size: .5rem;
        }
      }

      .sidebar-menu-item__logo {
        div {
          min-width: 1.5rem;
          width: 2em;
          height: 2em;
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
        }
      }
    }
  }

  &.collapsed {
    grid-template-rows: auto;
    width: $sideBarWidthCollapsed;

    .sidebar-menu-item__logo-title,
    .sidebar-menu-item__header,
    .sidebar-menu-item__title,
    .sidebar-menu-item__caret,
    .sidebar-menu-item__indicator {
      display: none;
    }
    .next-ui-sidebar__menu-footer {
      width: $sideBarWidthCollapsed;
    }

    ul {
      li {
        grid-template-columns: $sideBarWidthCollapsed;

        .sidebar-menu-item__icon {
          position: relative;

          .label {
            position: absolute;
            top: 0;
            right: 3px;
            zoom: .5;
          }
        }
      }
    }
  }

  &.mobile {
    .next-ui-sidebar__logo {
      width: inherit;
    }
  }
}