// ℹ️ This is common style that needs to be applied to both navs
%nav {
  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
}

/*
    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;
  font-weight: 600;

  // style for nested dot icon
  .nav-item-icon {
    color: rgb(var(--v-global-theme-primary)) !important;
    filter: drop-shadow(rgb(var(--v-global-theme-primary)) 0 0 2px);
    transform: scale(1.2);
  }
}
