.sidebar {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: -100%;
  width: rem(250px);
  height: 100vh;
  background-color: var(--white);
  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: 86px;

    &:hover {
      width: auto;
    }

    .sidebar-menu li a i {
      margin-inline-end: 16px;
    }

    &: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 media(3xl) {
            font-size: rem(22px);
          }
        }
      }

      &.open,
      &.dropdown-open {
        >a {
          background-color: var(--primary-600);
          color: #fff;

          &:hover {
            color: #fff;
          }

          &::after {
            @include transform(translateY(-50%) rotate(90deg));
          }
        }
      }

      &.open {
        .sidebar-submenu {
          display: block;
        }
      }
    }

    >a {
      &.active-page {
        background-color: var(--primary-600);
        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 border-radius(8px);
      font-size: rem(14px);

      @include media(3xl) {
        font-size: rem(16px);
      }

      &:hover {
        color: var(--primary-600);
      }

      .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);
    }
  }
}


.filter-grayscale-1 {
    filter: grayscale(1);
}