/* Sidebar + drawer nav indicator (Phase A, mirrors chrome pill) */

.mc-gl-nav,
.mc-nav-drawer__body {
  position: relative;
}

/* Room for indicator inset (4px X, 3px Y) so overflow on body does not clip the pill ring */
.mc-nav-drawer__body {
  padding-inline: 4px;
  padding-block: 3px;
  box-sizing: border-box;
}

.mc-nav-indicator {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 0;
  height: 0;
  border-radius: 10px;
  background: var(--mc-nav-indicator-bg, var(--mc-chrome-indicator-bg, rgba(15, 23, 42, 0.08)));
  border: 1px solid var(--mc-nav-indicator-ring, var(--mc-chrome-indicator-ring, rgba(255, 255, 255, 0.62)));
  box-shadow: var(--mc-nav-indicator-shadow, var(--mc-chrome-indicator-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.55)));
  opacity: 0;
  transform: translate3d(0, 0, 0);
  pointer-events: none;
  will-change: transform, width, height;
}

.mc-nav-drawer__body .mc-nav-indicator {
  border-radius: 10px;
  box-sizing: border-box;
}

.mc-gl-nav .mc-nav-indicator {
  border-radius: 8px;
}

.mc-gl-nav__link,
.mc-nav-drawer__link,
.mc-nav-drawer__sublink {
  position: relative;
  z-index: 1;
}

.mc-nav--indicator-ready .mc-gl-nav__link.is-active,
.mc-nav--indicator-ready .mc-nav-drawer__link.is-active,
.mc-nav--indicator-ready .mc-nav-drawer__sublink.is-active {
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.mc-nav--indicator-ready .mc-gl-nav__link:hover,
.mc-nav--indicator-ready .mc-nav-drawer__link:hover,
.mc-nav--indicator-ready .mc-nav-drawer__sublink:hover {
  background: transparent;
}

.mc-nav--indicator-ready .mc-gl-nav__link.is-active,
.mc-nav--indicator-ready .mc-nav-drawer__link.is-active {
  color: var(--mc-nav-indicator-ink, var(--mc-accent, #0030de));
  font-weight: 600;
}

html.mc-chrome-tone-dark .mc-nav-drawer__body,
body.mc-chrome-tone-dark .mc-nav-drawer__body {
  --mc-nav-indicator-bg: rgba(255, 255, 255, 0.12);
  --mc-nav-indicator-ring: rgba(255, 255, 255, 0.2);
  --mc-nav-indicator-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --mc-nav-indicator-ink: #f8fafc;
}

[class*="mc-gl--"][class*="-dark"] .mc-gl-nav {
  --mc-nav-indicator-bg: rgba(255, 255, 255, 0.1);
  --mc-nav-indicator-ring: rgba(255, 255, 255, 0.16);
  --mc-nav-indicator-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --mc-nav-indicator-ink: #f8fafc;
}

html.mc-theme-day body:is(.mc-identity-overview, .mc-guidelines-overview, .mc-learn-overview, .mc-diy-overview, .mc-assets-overview) [class*="mc-gl--"][class*="-dark"] .mc-gl-nav,
html.mc-day-mode body:is(.mc-identity-overview, .mc-guidelines-overview, .mc-learn-overview, .mc-diy-overview, .mc-assets-overview) [class*="mc-gl--"][class*="-dark"] .mc-gl-nav {
  --mc-nav-indicator-bg: rgba(15, 23, 42, 0.07);
  --mc-nav-indicator-ring: rgba(15, 23, 42, 0.1);
  --mc-nav-indicator-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  --mc-nav-indicator-ink: var(--mc-day-hub-ink, #111827);
}

.mc-nav--indicator-ready .mc-gl-nav__link.is-active {
  color: var(--mc-nav-indicator-ink, var(--mc-ink));
}