/**
 * Icon Styles.
 *
 * @package Accommodate
 */

/* Inline SVG Icon Base.
   Icons are injected as inline <svg> markup, so color and stroke are fully
   controllable with CSS: "fill: currentColor" inherits the surrounding text
   color (set `color` on the icon or any ancestor to recolor), and the
   stroke is thickened via the --icon-stroke custom property. */
.accommodate-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  container-type: inline-size;
}

.accommodate-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.accommodate-icon path {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: var(--icon-stroke, 0px);
  stroke-linecap: round;
  stroke-linejoin: round;
  paint-order: stroke fill;
}

/* Stroke width scales with the rendered icon size (0px = keep as-is). */
@container (max-width: 128px) {
  .accommodate-icon path {
    --icon-stroke: 2px;
  }
}

@container (min-width: 128px) {
  .accommodate-icon path {
    --icon-stroke: 0px;
  }
}

/* Icon Sizes */
.accommodate-icon--xs {
  width: 12px;
  height: 12px;
}

.accommodate-icon--sm {
  width: 16px;
  height: 16px;
}

.accommodate-icon--md {
  width: 20px;
  height: 20px;
}

.accommodate-icon--lg {
  width: 24px;
  height: 24px;
}

.accommodate-icon--xl {
  width: 32px;
  height: 32px;
}

.accommodate-icon--2xl {
  width: 48px;
  height: 48px;
}

/* Icon Colors */
.accommodate-icon--primary {
  color: var(--color-primary);
}

.accommodate-icon--secondary {
  color: var(--color-secondary);
}

.accommodate-icon--muted {
  color: var(--color-text-muted);
}

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

/* Icon with Text */
.accommodate-icon-text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.accommodate-icon-text--reverse {
  flex-direction: row-reverse;
}