/* =============================================================================
   ICON HOLDER
   Mandatory wrapper for every icon SVG in the Kinko design system.
   Figma component set: node 2169:2353 (Icons Foundations page)
   INSTANCE_SWAP inner slot property: Atom
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. Component tokens — aliases to semantic spacing tokens
   --------------------------------------------------------------------------- */
:root {
  --icon-holder-size-xs: var(--spacing-12); /* 12px → 0.75rem */
  --icon-holder-size-sm: var(--spacing-16); /* 16px → 1rem    */
  --icon-holder-size-md: var(--spacing-20); /* 20px → 1.25rem */
  --icon-holder-size-lg: var(--spacing-24); /* 24px → 1.5rem  */
}

/* ---------------------------------------------------------------------------
   2. Component styles — use only --icon-holder-* vars below this line
   --------------------------------------------------------------------------- */

.icon-holder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

/* Inner SVG fills the holder and inherits color from parent context */
.icon-holder > svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Size modifiers */
.icon-holder--xs {
  width:  var(--icon-holder-size-xs);
  height: var(--icon-holder-size-xs);
}

.icon-holder--sm {
  width:  var(--icon-holder-size-sm);
  height: var(--icon-holder-size-sm);
}

.icon-holder--md {
  width:  var(--icon-holder-size-md);
  height: var(--icon-holder-size-md);
}

.icon-holder--lg {
  width:  var(--icon-holder-size-lg);
  height: var(--icon-holder-size-lg);
}