/* Sidebar (nav-pills) */
.components-nav {
  --pill-bg: rgba(var(--bs-primary-rgb), 0.12);
  --pill-border: color-mix(
    in srgb,
    var(--bs-border-color),
    var(--bs-primary) 35%
  );
  --pill-hover-bg: rgba(var(--bs-primary-rgb), 0.08);

  --bs-nav-link-color: var(--bs-body-color);
  --bs-nav-link-hover-color: var(--bs-primary);
}

.components-nav .nav-link {
  color: var(--bs-nav-link-color);
  border-radius: 12px;
  border: 1px solid transparent;
  padding: 0.5rem 0.75rem;
}
.components-nav .nav-link:hover {
  color: var(--bs-nav-link-hover-color);
  background: var(--pill-hover-bg);
}

.components-nav .nav-link.active,
.components-nav .show > .nav-link {
  color: var(--bs-primary);
  background: var(--pill-bg);
  border-color: var(--pill-border);
  box-shadow: none;
}

/* Fix para não sobrepor o header */
.components-page .components-nav.sticky-top {
  top: calc(var(--nav-h) + 12px) !important;
  z-index: 100;
}

.components-page .components-nav {
  top: calc(var(--nav-h) + 12px);
  z-index: 100;
}