@use '@beeline/design-tokens/scss/tokens/components/navigationDrawer';
@use "@beeline/design-tokens/scss/tokens/globals/colors";

.VPDocAside {
  .outline-link {
    font-weight: 400;
    font-size: 15px;
    line-height: 18px;
    letter-spacing: 0.2px;
    padding-top: 8px;
    padding-bottom: 8px;
    white-space: unset;
    color: colors.$color-text-grey-inactive;
  }

  .outline-link.active {
    font-weight: 500 !important;
    color: colors.$color-text-black-active;
  }

  .outline-title {
    font-size: 15px;
    font-weight: 500;
    line-height: 18px;
    padding-bottom: 16px;
    color: colors.$color-text-black-active;
  }

  .content {
    padding-left: 0px !important;
    border-left: 0px !important;

    nav {
      border-left: 1px solid var(--vp-c-divider) !important;

      .outline-link {
        padding-left: 20px !important;
        
        &.active {
          padding-left: 16px !important;
          position: relative !important;
          left: -1px !important;
          border-left: navigationDrawer.$navigation-drawer-item-indicator-width solid
            navigationDrawer.$navigation-drawer-item-activated-indicator-color !important;

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