@charset "UTF-8";
/* ===== Icons: simple, class-based, GB-safe ===== */
/* Wrapper */
.icon,
.gb-shape { /* allow using GB's <span class="gb-shape"> as the wrapper */
  display: inline-grid;
  place-items: center;
  line-height: 0; /* kill baseline gaps */
  color: var(--icon-fg, currentColor);
  vertical-align: middle;
  /* consume size token */
  width: var(--icon-size, 1.25rem); /* default from tokens: --icon-size-md */
  height: var(--icon-size, 1.25rem);
}

/* SVG child – force visible & scalable */
.icon > svg,
.gb-shape > svg {
  display: block !important;
  width: 100%;
  height: 100%;
  fill: currentColor !important;
}

/* Boxed / Naked styles */
.icon--boxed,
.gb-shape--boxed {
  padding: var(--icon-pad, 0.5rem);
  background: var(--icon-bg, var(--bg-surface));
  border: var(--icon-border-w, 1px) solid var(--icon-border, var(--border-light));
  border-radius: var(--icon-radius, var(--radius-s));
  overflow: hidden;
  isolation: isolate;
}

.icon--naked,
.gb-shape--naked {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

/* Sizes (hook both the glyph and its padding) */
.icon--xs, .gb-shape--xs {
  --icon-size: var(--icon-size-xs, .875rem);
  --icon-pad: var(--icon-pad-xs, .25rem);
}

.icon--sm, .gb-shape--sm {
  --icon-size: var(--icon-size-sm, 1rem);
  --icon-pad: var(--icon-pad-sm, .375rem);
}

.icon--md, .gb-shape--md {
  --icon-size: var(--icon-size-md, 1.25rem);
  --icon-pad: var(--icon-pad-md, .5rem);
}

.icon--lg, .gb-shape--lg {
  --icon-size: var(--icon-size-lg, 1.5rem);
  --icon-pad: var(--icon-pad-lg, .625rem);
}

.icon--xl, .gb-shape--xl {
  --icon-size: var(--icon-size-xl, 2rem);
  --icon-pad: var(--icon-pad-xl, .75rem);
}

/* Themes */
.icon--primary, .gb-shape--primary {
  color: var(--icon-fg-primary, var(--primary));
  --icon-bg: var(--icon-bg-primary, var(--primary-bg));
  --icon-border: var(--icon-border-primary, var(--primary-light));
}

.icon--secondary, .gb-shape--secondary {
  color: var(--icon-fg-secondary, var(--secondary));
  --icon-bg: var(--icon-bg-secondary, var(--secondary-bg));
  --icon-border: var(--icon-border-secondary, var(--secondary-light));
}

.icon--dark, .gb-shape--dark {
  color: var(--icon-fg-dark, var(--text-on-primary));
  --icon-bg: var(--icon-bg-dark, var(--primary-dark));
  --icon-border: var(--primary);
}

.icon--light, .gb-shape--light {
  color: var(--icon-fg-light, var(--text-primary));
  --icon-bg: var(--icon-bg-light, var(--bg-surface));
  --icon-border: var(--border-light);
}

/* Optional shapes */
.icon--circle, .gb-shape--circle {
  border-radius: 50%;
}

.icon--rounded, .gb-shape--rounded {
  border-radius: var(--radius-m);
}

/* High Contrast / Forced Colors support */
@media (forced-colors: active) {
  .icon--boxed, .gb-shape--boxed {
    border-color: CanvasText;
    background: Canvas;
    color: CanvasText;
  }
}