/*
 * Corza icon atom.
 *
 * corza.com sizes icons via fixed pixel boxes on the container, not via
 * SVG attributes. The canonical sizes from `custom.css`:
 *   - 20px — header search, communication icons
 *   - 30px — share strip (with circular border padding)
 *   - 60px — about/feature icons (matches their SVG width attribute)
 *   - 105px / 120px — `.o-icon-blocks__icon` circular feature container
 *
 * Coloring is baked into each SVG (hardcoded fills/strokes — typically
 * `#FF4D00`, `#123134`, or `#fff`). This atom does not attempt to
 * recolor; pair each icon with the surface it was authored for.
 */

.c-icon {
  display: inline-block;
  vertical-align: middle;
}

/* Inline SVG fills the wrapper so size is controlled by the size class
 * on the wrapper, not by the SVG's own width/height attributes. */
.c-icon > svg {
  display: block;
  height: 100%;
  width: 100%;
}

/* Raster icons keep aspect ratio inside the size box. */
img.c-icon {
  object-fit: contain;
}

.c-icon--sm {
  height: 20px;
  width: 20px;
}
.c-icon--md {
  height: 32px;
  width: 32px;
}
.c-icon--lg {
  height: 60px;
  width: 60px;
}
.c-icon--xl {
  height: 120px;
  width: 120px;
}

/* Framed — circular white plate, sized one step up from the icon
 * inside. Mirrors `.o-icon-blocks__icon` on corza.com. */
.c-icon-frame {
  align-items: center;
  background-color: #fff;
  border-radius: 50%;
  display: inline-flex;
  flex-shrink: 0;
  justify-content: center;
  overflow: hidden;
}

.c-icon-frame--sm {
  height: 40px;
  width: 40px;
}
.c-icon-frame--md {
  height: 64px;
  width: 64px;
}
.c-icon-frame--lg {
  height: 105px;
  width: 105px;
}
.c-icon-frame--xl {
  height: 144px;
  width: 144px;
}