.sidebar {
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  width: auto;
  position: sticky;
  top: 0;
  border-right: 1px solid $almostWhite;
  display: flex;
  flex-direction: column;

  hr {
    width: 100%;
    border-top: 1px solid $almostWhite;
    margin: 5px 0;
  }

  .sidebar-header {
    height: 90px;
    align-self: center;

    a:hover {
      text-decoration: none;
    }

    .sidebar-brand {
      text-transform: none;
      font-weight: normal;

      .sidebar-brand-text {
        color: $darkText;
        font-size: 12px;
        background-color: $almostWhite;
        border-radius: 4px;
        white-space: nowrap;
      }
    }
  }

  .sidebar-body {
    overflow-y: scroll;

    &::-webkit-scrollbar {
      width: 5px;
    }

    &::-webkit-scrollbar-thumb {
      background: #c2c2d6;
      border-radius: 5px;
    }
  }

  @media (min-width: 768px) {
    & {
      width: 20rem !important;
    }
  }

  &.toggled {
    overflow: auto;
  }

  .nav-item {
    margin: 0 15px;

    &:hover {
      cursor: pointer;
    }

    &:last-child {
      margin-bottom: 0;
    }

    .nav-link {
      padding: .7rem 2rem .7rem 1rem;
      width: auto;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      border-radius: 4px;
      color: #8E8EA9;

      &, & span {
        font-size: 15px;
      }

      &[data-bs-toggle=collapse] {
        &:after {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 8px;
          font-size: 14px;
          content: "\f331";
        }

        &.collapsed:after {
          font-size: 14px;
          content: "\f32d";
        }
      }

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

    &.active .nav-link {
      background: $primary;
      color: #fff;
    }

    // override font awesome version & size
    .nav-link:after,
    .nav-link[data-bs-toggle=collapse]:after {
      font: normal normal normal 14px/1 FontAwesome;
    }

    .collapse,
    .collapsing {
      margin-left: 0;
      margin-right: 0;

      .collapse-inner {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;

        .collapse-item {
          color: #8E8EA9;
          text-overflow: ellipsis;
          overflow: hidden;
          padding: 10px 15px;

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

          &.active {
            background-color: $primary;
            color: #fff;
          }

          i {
            width: 20px;
          }
        }
      }
    }
  }

  .sidebar-footer {
    margin-top: auto;// keep at bottom

    .profile {
      padding: 10px 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .profile-link {
        &:hover {
          opacity: 0.8;
        }

        i {
          color: #F6C14F;
          font-size: 28px;
        }
      }

      .profile-name {
        font-size: 14px;
        font-weight: bold;
        color: #8E8EA9;

        &:hover {
          text-decoration: none;
        }

      }

      .logout {
        line-height: 40px;
        width: 40px;
        text-align: center;

        &:hover {
          opacity: 0.8;
        }

        i {
          color: #8E8EA9;
          font-size: 18px;
        }
      }
    }
  }
}

@media (max-width: 767px) {
  .main-navbar {
    padding-left: 65px;
  }

  .sidebar-toggle-btn {
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 250;
    background: #ffffff
  }

  .sidebar-toggled .sidebar-toggle-btn {
    &:after {
      display: inline-block;
      content: '';
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      background: #ffffff;
      opacity: 0.5;
      z-index: 100;
      width: 25vw;
    }
  }

  .sidebar {
    display: none;

    &.toggled {
      display: block;
      position: fixed;
      height: 100vh;
      top: 0;
      left: 0;
      z-index: 200;
      width: 75vw !important;
    }

    .nav-item {
      .collapse {
        position: relative;
        top: 0;
        left: 0;
        z-index: 1;
        margin: 0 10px;
      }

      .nav-link[data-bs-toggle=collapse] {
        &:after {
          width: 1rem;
          text-align: center;
          float: right;
          vertical-align: 0;
          border: 0;
          content: "\f107";
          font: normal normal normal 14px/1 FontAwesome;
          font-size: 20px;
        }

        &.collapsed:after {
          content: "\f105";
        }
      }
    }
  }
}