@use '@beeline/design-tokens/scss/tokens/components/navigationDrawer';
@use '@beeline/design-tokens/scss/tokens/themes/theme-variables' as theme;
@use '@/scss/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;
}

.wip-item {
  position: relative;
  padding: 12px 32px;
  cursor: default;
  user-select: none;

  .text {
    color: rgba(25, 28, 52, 0.28) !important;
    font-size: 15px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0.2px;
  }

  &::after {
    content: attr(data-tooltip);
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    padding: 6px 10px;
    border-radius: 6px;
    background-color: rgba(9, 11, 22, 0.82);
    color: #fff;
    font-size: 13px;
    line-height: 18px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0s;
  }

  &:hover::after {
    opacity: 1;
  }
}

.dark .wip-item .text {
  color: rgba(255, 255, 255, 0.22) !important;
}

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