/* Material Symbols (Rounded) helpers */

.gtmm-icon.material-symbols-rounded {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-right: 0.45rem;
  line-height: 1;
  flex-shrink: 0;

  /* Nudge to visually align with text baseline in buttons */
  position: relative;
  top: 1px;

  /* Make it track the surrounding button text size */
  font-size: 1.15em;

  /* Match the button/link text color */
  color: currentColor;

  /* Prevent selection artifacts */
  user-select: none;

  /* Recommended Material Symbols settings */
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}

/* Sidebar/menu icons: a touch tighter and consistent */
.gtmm-menu-icon.material-symbols-rounded {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Parent link uses flex gap for spacing */
  margin-right: 0;

  /* White circular badge */
  background: #ffffff;
  color: var(--color-dark);
  border-radius: 999px;
  padding: 0.28em;

  /* Keep a consistent circle size */
  width: 1.9em;
  height: 1.9em;

  /* Slightly smaller inside the circle */
  font-size: 1.05em;

  /* Don't apply the baseline nudge used for inline icons */
  top: 0;
}

/* Logout should not have the white circle */
#block-gtmm-account-menu a[data-drupal-link-system-path='user/logout'] .gtmm-menu-icon.material-symbols-rounded {
  background: transparent;
  border-radius: 0;
  padding: 0;
  width: auto;
  height: auto;
  color: currentColor;
}

/* If an element becomes icon-only, remove the margin */
.gtmm-icon.material-symbols-rounded:only-child {
  margin-right: 0;
}