/*
 * Icon is a glyph, not a container.
 *
 * It used to own a background, a border, a padded inset and a `shape` — a
 * second, weaker implementation of the plane `Shape` now provides. Worse, its
 * background only ever wired the *tonal* pair, so `background="primary"` with
 * `color="inverse"` produced a near-white glyph on a pale tint at 1.13:1. That
 * combination is unrepresentable now: a circled icon is a `Shape` with an
 * `Icon` inside, and the glyph inherits `currentColor` from the plane that
 * paints it.
 */
.cr-icon {
  --cr-icon-color: currentColor;
  --cr-icon-direction-scale: 1;
  --cr-icon-rotation: 0deg;
  --cr-icon-size: var(--cr-size-icon-md);
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  inline-size: var(--cr-icon-size);
  block-size: var(--cr-icon-size);
  color: var(--cr-icon-color);
  transform: scaleX(var(--cr-icon-direction-scale))
    rotate(var(--cr-icon-rotation));
  transform-origin: center;
  vertical-align: middle;
}

.cr-icon svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  flex: var(--cr-flex-shrink-none);
}

.cr-icon--xs {
  --cr-icon-size: var(--cr-size-icon-xs);
}

.cr-icon--sm {
  --cr-icon-size: var(--cr-size-icon-sm);
}

.cr-icon--md {
  --cr-icon-size: var(--cr-size-icon-md);
}

.cr-icon--lg {
  --cr-icon-size: var(--cr-size-icon-lg);
}

.cr-icon--xl {
  --cr-icon-size: var(--cr-size-icon-xl);
}

.cr-icon--rotate-45 {
  --cr-icon-rotation: 45deg;
}

.cr-icon--rotate-90 {
  --cr-icon-rotation: 90deg;
}

.cr-icon--rotate-180 {
  --cr-icon-rotation: 180deg;
}

.cr-icon--rotate-270 {
  --cr-icon-rotation: 270deg;
}

.cr-icon.cr-icon--color-current {
  --cr-icon-color: currentColor;
}

.cr-icon.cr-icon--color-text {
  --cr-icon-color: var(--cr-color-text-primary);
}

.cr-icon[data-cr-color-role] {
  --cr-icon-color: var(--cr-role-tone-icon);
}

.cr-icon.cr-icon--color-inverse {
  --cr-icon-color: var(--cr-color-text-inverse);
}

.cr-icon--mirror-rtl:dir(rtl),
[dir="rtl"] .cr-icon--mirror-rtl {
  --cr-icon-direction-scale: -1;
}