.sidebar {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: -100%;
  width: rem(250px);
  height: 100vh;
  background-color: var(--white);
  transition: all 0.3s;
  z-index: 3;
  @include media(xl) {
    inset-inline-start: 0;
    width: rem(220px);
  }
  @include media(xxl) {
    width: rem(275px);
  }
  @include media(3xl) {
    width: rem(312px);
  }
  &-close-btn {
    position: absolute;
    top: rem(10px);
    inset-inline-end: rem(10px);
    width: rem(28px);
    height: rem(28px);
    border: 1px solid var(--input-form-light);
    @include border-radius(50%);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    @include media(xl) {
      display: none;
    }
  }
  &.sidebar-open {
    inset-inline-start: 0;
  }
  &.active {
    width: auto;
    &:hover {
      @include media(xl) {
        inset-inline-start: 0;
      }
      @include media(xxl) {
        width: rem(275px);
      }
      @include media(3xl) {
        width: rem(312px);
      }
      .sidebar-logo {
        img {
          &.light-logo {
            display: inline-block;
          }
          &.logo-icon {
            display: none;
          }
        }
      }
      .sidebar-menu {
        li {
          a {
            span {
              display: inline-block;
            }
            .menu-icon {
              margin-inline-end: rem(8px);
            }
          }
          &.dropdown.dropdown-open,
          &.dropdown.open {
            .sidebar-submenu {
              display: block !important;
            }
          }
          &.sidebar-menu-group-title {
            display: inline-block;
          }
          &.dropdown {
            a {
              &::after {
                display: inline-block;
              }
            }
          }
        }
      }
    }
    .sidebar-logo {
      img {
        &.light-logo,
        &.dark-logo {
          display: none;
        }
        &.logo-icon {
          display: inline-block;
        }
      }
    }
    .sidebar-menu {
      li {
        a {
          span {
            display: none;
          }
          .menu-icon {
            margin-inline-end: 0;
          }
        }
        &.sidebar-menu-group-title {
          display: none;
        }
        &.dropdown {
          &.dropdown-open,
          &.open {
            .sidebar-submenu {
              display: none !important;
            }
          }
          a {
            &::after {
              display: none;
            }
          }
        }
      }
    }
  }
  &-logo {
    height: rem(72px);
    padding: rem(14px) rem(16px);
    border-inline-end: 1px solid var(--neutral-200);
    border-block-end: 1px solid var(--neutral-200);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    img {
      max-height: rem(55px);
      &.dark-logo {
        display: none;
      }
      &.logo-icon {
        display: none;
      }
    }
  }
  &-menu-area {
    height: calc(100vh - 72px);
    padding: rem(12px) rem(16px);
    overflow-y: auto;
    border-inline-end: 1px solid var(--neutral-200);
    &:hover {
      &::-webkit-scrollbar-thumb {
        background-color: var(--neutral-200);
      }
    }
    &::-webkit-scrollbar {
      width: 6px;
      background-color: var(--white);
    }
    &::-webkit-scrollbar-thumb {
      background-color: var(--white);
    }
  }
}

[data-theme="dark"] {
  .sidebar {
    &.active {
      &:hover {
        .sidebar-logo {
          img {
            &.light-logo {
              display: none;
            }
            &.dark-logo {
              display: inline-block;
            }
          }
        }
      }
      .sidebar-logo {
        img {
          &.light-logo {
            display: none;
          }
        }
      }
    }
    &-logo {
      img {
        &.light-logo {
          display: none;
        }
        &.dark-logo {
          display: inline-block;
        }
      }
    }
  }
}

.sidebar-menu {
  li {
    &.dropdown {
      > a {
        position: relative;
        &::after {
          position: absolute;
          content: "\ea6e";
          font-family: remixicon;
          font-style: normal;
          inset-block-start: 50%;
          inset-inline-end: rem(12px);
          @include transform(translateY(-50%));
          font-size: rem(18px);
          @include transition(all 0.3s);
          @include media(3xl) {
            font-size: rem(22px);
          }
        }
      }
      &.open,
      &.dropdown-open {
        > a {
          background-color: var(--brand);
          color: #fff;
          &:hover {
            color: #fff;
          }
          &::after {
            @include transform(translateY(-50%) rotate(90deg));
          }
        }
      }
      &.open {
        .sidebar-submenu {
          display: block;
        }
      }
    }
    > a {
      &.active-page {
        background-color: var(--brand);
        color: #fff;
        &:hover {
          color: #fff;
        } 
      }
    }
    a {
      padding: rem(10px) rem(12px);
      font-weight: 500;
      display: flex;
      align-items: center;
      color: var(--text-secondary-light);
      @include transition(all 0.3s);
      @include border-radius(8px);
      font-size: rem(14px);
      @include media(3xl) {
        font-size: rem(16px);
      }
      &:hover {
        color: var(--brand);
      }
      .menu-icon {
        font-size: rem(18px);
        margin-inline-end: rem(8px);
        @include media(3xl) {
          font-size: rem(22px);
          margin-inline-end: rem(12px);
        }
      }
      i {
        line-height: 1.2;
        width: 24px;
        margin-inline-end: rem(12px);
        font-size: rem(22px);
      }
      .circle-icon {
        font-size: rem(10px);
      }
    }
  }
  .sidebar-submenu {
    padding-block-start: rem(12px);
    display: none;
    padding-inline-start: rem(24px);
    transition: none;
    @include media(3xl) {
      padding-inline-start: rem(44px);
    }
    li {
      &.active-page {
        a {
          background-color: var(--button-secondary);
          color: var(--text-primary-light);
        }
      }
      a {
        padding: rem(7px) rem(12px);
      }
    }
  }
  .sidebar-menu-group-title {
    color: var(--neutral-500);
    font-weight: 600;
    margin-block: rem(8px);
    font-size: rem(14px);
    @include media(3xl) {
      font-size: rem(16px);
    }
  }
}