/* ==========================================================================
   Icon Component
   ========================================================================== */

@layer utilities {
  .icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    stroke: currentColor;
  }

  /* Sizes */
  .icon--xs {
    width: 14px;
    height: 14px;
  }

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

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

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

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

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