.sidebar {
  @apply flex flex-col h-auto overflow-y-auto text-gray-800 bg-white shadow-base overflow-hidden p-6 transition-all duration-500 ease-in-out;
  .sidebar-head {
    @apply flex flex-wrap items-center justify-between;
    h4 {
      @apply font-semibold w-auto;
    }
    .close-sidebar {
      @apply cursor-pointer transform transition-all duration-400 ease-in-out;
      &:hover {
        @apply text-primary-900;
      }
      &.close {
        @apply rotate-180;
      }
    }
  }
  h5 { @apply mb-3; }
  .sidebar-nav {
    @apply list-none p-0;
    .sidebar-item  {
      @apply no-underline font-semibold p-1 flex flex-wrap items-center transition-all duration-400 ease-in-out;
      .sidebar-icon {
        @apply mr-2;
        .tooltip { @apply hidden; }
      }
      &:hover, &.is-active {
        @apply text-primary-600 ;
      }
    }
    .has-submenu {
      .sidebar-submenu {
        @apply list-none p-0 relative -z-1 scale-y-0 h-0 opacity-0 bg-slate-100 mt-1 rounded-sm transition duration-300 ease-in-out;
        .sidebar-item {
          @apply font-medium text-base px-4 py-2;
          &:hover, &.is-active {
            @apply text-secondary-600 ;
          }
        }
        li { @apply mb-0; }
      }
      .sidebar-item:focus + .sidebar-submenu,
      .sidebar-item.is-active + .sidebar-submenu {
        @apply scale-100 h-auto z-1 opacity-100;
      }
    }
    &.semi-transparent {
      .sidebar-item  {
        @apply bg-primary-50/20 px-5 py-2 rounded;
        .sidebar-icon {
          @apply mr-2;
          .tooltip { @apply hidden; }
        }
        &:hover, &.is-active {
          @apply bg-primary-50 text-primary-900 ;
        }
        &.is-active {
          @apply border-l-6 border-primary-500;
        }
      }
    }
    .sidebar-text { @apply w-auto; }
    li:not(:last-child) {
      @apply mb-2
    }
  }
  .sidebar-foot {
    @apply mt-auto pt-4 border-t border-slate-200/50;
  }
  .sidebar-divider {
    @apply my-4 border-t border-slate-200/30;
  }
  .menu-title {
    @apply mb-2 font-sans text-sm font-medium uppercase text-slate-300;
  }
  &.rounded-links {
    .sidebar-nav {
      @apply space-y-3;
      .sidebar-item  {
        @apply p-3 text-slate-200 rounded-lg font-medium;
        .sidebar-icon {
          @apply mr-2;
          .tooltip { @apply hidden; }
        }
        &:hover, &.is-active {
          @apply bg-slate-100 text-slate-700 ;
        }
      }
      .has-submenu {
        .sidebar-submenu {
          @apply space-y-1  rounded bg-secondary-900 p-1;
          .sidebar-item {
            @apply bg-transparent font-normal text-base px-4 py-1;
            &.is-active,
            &:hover {
              @apply text-tertiary-600;
            }
          }
        }
      }
    }
  }
  &.is-primary {
    .sidebar-head {
      @apply text-white;
    }
    .sidebar-nav {
      .sidebar-item  {
        @apply text-slate-200;
      }
    }
    @apply bg-primary-700;
  }
  &.is-secondary {
    .sidebar-head {
      @apply text-white;
    }
    .sidebar-nav {
      .sidebar-item  {
        @apply text-slate-200;
      }
    }
    @apply bg-secondary-700;
  }
  &.is-tertiary {
    .sidebar-head {
      @apply text-white;
    }
    .sidebar-nav {
      .sidebar-item  {
        @apply text-slate-200;
      }
    }
    @apply bg-tertiary-700;
  }
}

@screen tablet {
  .sidebar {
    &.is-closed {
      width: 5%;
      @apply px-2 py-6;
      .sidebar-head {
        @apply justify-center relative pt-2;
      }
      h4, h5 { @apply w-0 opacity-0 absolute -z-1 transition-all duration-300 ease-in-out; }
      .sidebar-nav {
        .sidebar-item{
          @apply px-3 justify-center;
          .sidebar-text { @apply w-0 opacity-0 absolute -z-1 transition-all duration-300 ease-in-out; }
          .sidebar-icon {
            @apply mr-0;
            .tooltip { @apply inline-block; }
          }
        }
      }
    }
  }
}

@screen max-md {
  .sidebar {
    @apply absolute w-64 h-full top-0 z-20 -left-100 transition-all duration-500 ease-in-out;
    &.is-sidebar-open {
      @apply left-0  w-64;
    }
    .close-sidebar { @apply hidden; }
  }
}