@use '@beeline/design-tokens/scss/tokens/components/navigationDrawer';
@use '@beeline/design-tokens/scss/tokens/themes/theme-variables' as theme;
@use 'src/assets/scss/app/helpers/media';

.VPSidebar {
  --vp-sidebar-bg-color: var(--vp-c-bg);
}

.VPSidebar .VPSidebarItem .item {
  margin: 4px 0;
}

.VPSidebar .VPSidebarItem .link {
  display: flex;
  align-items: center;
}

.indicator {
  border-top-right-radius: navigationDrawer.$navigation-drawer-item-indicator-border-radius-topright !important;
  border-bottom-right-radius: navigationDrawer.$navigation-drawer-item-indicator-border-radius-bottomright !important;
  position: absolute !important;
  left: 0 !important;
}

.VPSidebarItem.is-active > .item .link > .text {
  color: theme.$color-text-active !important;
  font-weight: 500 !important;
  line-height: 20px !important;
}

.VPSidebarItem {
  .item {
    padding: 12px 32px !important;
    border-top-right-radius: 12px !important; 
    border-bottom-right-radius: 12px !important;
    color: theme.$color-text-inactive;
    
    &:hover {
      background-color: navigationDrawer.$navigation-drawer-item-hover-background-color !important;
      color: theme.$color-text-inactive;
    }
  }

  &.is-active > .item > .indicator {
    border-left: navigationDrawer.$navigation-drawer-item-indicator-width solid
      navigationDrawer.$navigation-drawer-item-activated-indicator-color !important;
  }
}

.VPSidebarItem.collapsible {
  .items {
    margin-left: 16px;

    .item {
      padding: 12px 16px 12px 56px !important;
      border-top-left-radius: 12px !important; 
      border-bottom-left-radius: 12px !important;
    }
  }

  &.is-active,
  &.has-active {
    > .item {
      .indicator {
        display: block !important;
        border-left: navigationDrawer.$navigation-drawer-item-indicator-width solid
          navigationDrawer.$navigation-drawer-item-activated-indicator-color !important;
      }
      
      .text {
        color: theme.$color-text-active !important;
        font-weight: 500 !important;
      }
    }
  }

  .items .VPSidebarItem.is-active > .item {
    background-color: navigationDrawer.$navigation-drawer-item-hover-background-color !important;
    
    .text {
      color: theme.$color-text-active !important;
      font-weight: 500 !important;
    }
  }
}

.VPSidebarItem.collapsible .items .item .indicator {
  display: none !important;
}

.text {
  padding: 0px !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 18px !important;
  letter-spacing: 0.2px !important;
  
  transition-property: all;
  transition-duration: 150ms;
  transition-timing-function: ease-in-out;
  color: theme.$color-text-inactive !important;
}

.VPSidebarItem .items {
  border-left: 0px !important;
}

.VPSidebarItem {
  padding-bottom: 0px !important;
}

.VPLocalNav.has-sidebar {
  @include media.max(sm) {
    padding-left: 0px;
  }
}