/**
 * Global inline SVG icon reliability.
 * Keeps UI icons visible in flex layouts without overriding sized component icons.
 */

svg {
  flex-shrink: 0;
  vertical-align: middle;
}

.bbd-ui-icon {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.bbd-ui-icon--sm {
  width: 1rem;
  height: 1rem;
}

.bbd-ui-icon--lg {
  width: 1.5rem;
  height: 1.5rem;
}

:where(
  button,
  a,
  summary,
  label,
  [role="menuitem"],
  [role="button"]
) svg.bbd-ui-icon:not([class*="w-"]):not([class*="h-"]) {
  width: 1.25rem;
  height: 1.25rem;
}

:where(
  button,
  a,
  summary,
  label,
  [role="menuitem"],
  [role="button"]
) svg:not(.bbd-ui-icon):not([width]):not([height]):not([class*="__icon"]):not([class*="__svg"]):not([class*="icon-svg"]):not([class*="w-"]):not([class*="h-"]) {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}

svg[aria-hidden="true"]:not(.bbd-ui-icon):not([width]):not([height]):not([class*="__icon"]):not([class*="__svg"]):not([class*="icon-svg"]):not([class*="w-"]):not([class*="h-"]) {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}