/*This is for the logo*/
.leftSidebar {
  border: 0px;
  box-shadow: none !important;
  top: 0 !important;
  height: calc(100% - 0px) !important;
  overflow: hidden !important;

  /* Hide native scrollbars (Edge, Chrome, Safari, Firefox) */
  .v-navigation-drawer__content {
    overflow: hidden !important;
    -ms-overflow-style: none; /* IE + old Edge */
    scrollbar-width: none; /* Firefox */

    &::-webkit-scrollbar {
      width: 0 !important;
      height: 0 !important;
      background: transparent !important;
    }
  }

  /* Keep PerfectScrollbar visible */
  .ps__rail-y,
  .ps__rail-x {
    display: block !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .ps__thumb-y,
  .ps__thumb-x {
    opacity: 1 !important;
  }

  @media (min-width: 1279px) {
    background-color: rgb(var(--v-theme-containerBg));
    border-right: 1px dashed rgba(var(--v-theme-inputBorder));
    [dir="rtl"] & {
      border-left: 1px dashed rgba(var(--v-theme-inputBorder));
      border-right: unset;
    }
  }
  &.v-navigation-drawer--rail {
    box-shadow: var(--v-card-shadow) !important;
    border-right: none;
  }
  .logo {
    padding-left: 7px;
  }
}

/*This is for the Vertical sidebar*/
@media (min-width: 1280px) {
  .verticalLayout:not(.component-wrapper) {
    .v-application__wrap {
      > header.v-toolbar {
        width: calc(100% - 279px) !important;
        left: 279px !important;
        [dir="rtl"] & {
          left: unset !important;
          right: 279px !important;
        }
      }
    }
    &.mini-sidebar {
      .v-application__wrap {
        > header.v-toolbar {
          width: calc(100% - 90px) !important;
          left: 90px !important;
          [dir="rtl"] & {
            left: unset !important;
            right: 90px !important;
          }
        }
      }
    }
  }
}

.scrollnavbar {
  height: calc(100vh - 104px);
  .v-list-subheader {
    font-weight: 600;
  }
  .pc-icon {
    width: 20px;
    height: 20px;
    color: rgb(var(--v-theme-lightText));
  }
  .v-list {
    color: rgb(var(--v-theme-lightText));
    padding: 0;
    .v-list-item--one-line {
      &.v-list-item--active {
        .text-lightText {
          color: rgb(var(--v-theme-primary)) !important;
        }
      }
    }
    .v-list-group {
      .v-list-item--one-line {
        &.v-list-item--active.v-list-item--link {
          .v-list-item__overlay {
            background: transparent;
          }
        }
        &.v-list-item--active.v-list-group__header {
          border-right: none;
        }
      }
      .v-list-group__items {
        .v-list-item--link,
        .v-list-item {
          &::before {
            position: absolute;
            content: "";
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background-color: rgb(var(--v-theme-lightText));
            left: 30px;
            [dir="rtl"] & {
              left: unset;
              right: 30px;
            }
          }
          &.v-list-item--active {
            &::before {
              width: 6px;
              height: 6px;
              background-color: rgb(var(--v-theme-primary));
            }
          }
          .v-list-item__prepend {
            width: 0;
          }
        }
        .v-list-group__items {
          .v-list-item--link,
          .v-list-item {
            &::before {
              left: 45px;
              [dir="rtl"] & {
                left: unset;
                right: 45px;
              }
            }
          }
          .v-list-item__prepend {
            margin-inline-end: 0;
          }
        }
      }
    }
  }

  /*General Menu css*/
  .v-list-group__items .v-list-item,
  .v-list-item {
    border-radius: 8px;
    padding-inline-start: calc(20px + var(--indent-padding) / 2) !important;
    margin-bottom: 2px;
    .v-list-item__prepend {
      margin-inline-end: 13px;
    }
    .v-list-item__append {
      font-size: 0.875rem;
      .v-icon {
        margin-inline-start: 13px;
      }
      > .v-icon {
        --v-medium-emphasis-opacity: 0.8;
        font-size: 17px;
      }
    }
    .v-list-item-title {
      font-size: 0.875rem;
      color: rgb(var(--v-theme-lightText));
    }
    &.v-list-item--active {
      .v-list-item-title,
      .pc-icon {
        color: rgb(var(--v-theme-primary));
      }
    }
  }

  /*This is for the dropdown*/
  .v-list {
    .v-list-item--active {
      .v-list-item-title {
        font-weight: 500;
      }
    }
    .sidebarchip .v-icon {
      margin-inline-start: -3px;
    }
    .v-list-group {
      .v-list-item:focus-visible > .v-list-item__overlay {
        opacity: 0;
      }
    }
    > .v-list-group {
      position: relative;
      > .v-list-item--active,
      > .v-list-item:hover {
        background: rgb(var(--v-theme-primary), 0.05);
      }
    }
  }
}

.v-navigation-drawer--rail {
  .scrollnavbar .v-list .v-list-group__items,
  .hide-menu {
    opacity: 0;
  }
  .scrollnavbar {
    .v-list-item {
      .v-list-item__prepend {
        margin-left: 12px;
        [dir="rtl"] & {
          margin-right: 12px;
        }
        .anticon {
          svg {
            width: 20px;
            height: 20px;
          }
        }
      }
    }
    .v-list-group__items .v-list-item,
    .v-list-item {
      padding-inline-start: calc(12px + var(--indent-padding) / 2) !important;
    }
    .ExtraBox {
      display: none;
    }
    .pc-icon {
      width: 24px;
      height: 24px;
    }
  }
  .sidebar-user {
    margin-left: -6px;
  }
  .leftPadding {
    margin-left: 0px;
  }
  &.leftSidebar {
    .v-list-subheader {
      display: none;
    }
    .v-navigation-drawer__content {
      .pa-5 {
        padding-left: 10px !important;
      }
    }
  }
}

@media only screen and (min-width: 1170px) {
  .mini-sidebar {
    .logo {
      overflow: hidden;
      svg {
        width: 52px;
      }
    }
    .leftSidebar:hover {
      box-shadow: $box-shadow !important;
    }
    .v-navigation-drawer--expand-on-hover:hover {
      .logo {
        width: 100%;
      }
      .v-list .v-list-group__items,
      .hide-menu {
        opacity: 1;
      }
    }
  }
}