/*!
 * BecksBeauty Framework — icons
 * Sizing and alignment for the SVG sprite in icons/sprite.svg.
 * MIT License
 *
 * Usage:
 *   Inline the sprite once per page (in PHP: <?php include 'icons/sprite.svg'; ?>)
 *   then reference symbols by id:
 *
 *   <svg class="icon" aria-hidden="true"><use href="#bb-phone"></use></svg>
 *
 *   For a meaningful icon with no adjacent text, give it a label instead:
 *   <svg class="icon" role="img" aria-label="Call us"><use href="#bb-phone"></use></svg>
 */

.icon {
  display: inline-block;
  width: var(--bb-icon-size, 1.25em);
  height: var(--bb-icon-size, 1.25em);
  flex: 0 0 auto;
  vertical-align: -0.22em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

/* Sizes ------------------------------------------------------------------- */
.icon-xs { --bb-icon-size: 0.875em; }
.icon-sm { --bb-icon-size: 1em; }
.icon-md { --bb-icon-size: 1.5em; }
.icon-lg { --bb-icon-size: 2em; }
.icon-xl { --bb-icon-size: 3em; }
.icon-2xl { --bb-icon-size: 4rem; }

/* Weight ------------------------------------------------------------------ */
.icon-thin  { stroke-width: 1.25; }
.icon-bold  { stroke-width: 2.25; }

/* Some glyphs (social marks, quote) are drawn as solid shapes. */
.icon-solid {
  fill: currentColor;
  stroke: none;
}

/* Colour ------------------------------------------------------------------ */
.icon-primary { color: var(--bb-primary); }
.icon-accent  { color: var(--bb-accent); }
.icon-muted   { color: var(--bb-text-muted); }
.icon-success { color: var(--bb-success); }
.icon-danger  { color: var(--bb-danger); }

/* Icon in a tinted circle — used for service and feature lists. */
.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bb-icon-circle, 3.5rem);
  height: var(--bb-icon-circle, 3.5rem);
  border-radius: 50%;
  background: color-mix(in srgb, var(--bb-accent) 15%, transparent);
  color: var(--bb-accent-dark);
}

.icon-circle .icon {
  --bb-icon-size: 1.5rem;
  vertical-align: 0;
}

.icon-circle-lg { --bb-icon-circle: 4.5rem; }

.icon-circle-primary {
  background: color-mix(in srgb, var(--bb-primary) 12%, transparent);
  color: var(--bb-primary);
}

.icon-circle-solid {
  background: var(--bb-primary);
  color: #fff;
}

/* Inline icon + text pair with consistent spacing. */
.icon-text {
  display: inline-flex;
  align-items: center;
  gap: var(--bb-space-2);
}

/* Spins a loading indicator. */
.icon-spin {
  animation: bb-spin 900ms linear infinite;
}

@keyframes bb-spin {
  to { transform: rotate(360deg); }
}