// ℹ️ This is common style that needs to be applied to both navs
%nav {
  .nav-item-title {
    letter-spacing: normal;
    line-height: 1.375rem;
  }
}

/*
    Active nav link styles for horizontal & vertical nav

    For horizontal nav it will be only applied to top level nav items
    For vertical nav it will be only applied to nav links (not nav groups)
*/
%nav-link-active {
  --v-activated-opacity: 0.16;

  background-color: rgba(var(--v-theme-primary), var(--v-activated-opacity));
  box-shadow: none;
  color: rgb(var(--v-theme-primary));
}

// style for vertical nav nested icon
%nav-link-nested-active {
  background-color: transparent !important;
  box-shadow: none;
  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;

  // style for nested dot icon
  .nav-item-icon {
    color: rgb(var(--v-theme-primary), var(--v-activated-opacity)) !important;
    transform: scale(2.6662);

    &::before {
      position: absolute;
      border-radius: 6px;
      background-color: rgb(var(--v-theme-primary));
      block-size: 100%;
      content: "";
      inline-size: 100%;
      inset: 0;
      transform: scale(-0.5);
    }
  }
}