@layer components {
/* Icon — inline SVG UI icon, rendered by the WidgetIcon UIModule.
   Figma: icon sizes Large 24 / Medium 20 / Small 16 (nodes 2131:9877–9878).

   Structure: <svg class="psw-icon psw-icon--<size>">…</svg>

   The SVG's paths use `currentColor`, so the icon takes its color from this
   rule by default. Unthemed, `--theme-primary` resolves to the Cobalt 500
   default (:root in tokens.css); a Pro's primary_color or a component/utility
   override wins over it. Size is pinned by the modifier rather than the SVG's own
   width/height attributes, so an icon stays crisp regardless of the source
   asset. */

.psw-icon {
    display: inline-block;
    flex: none;                       /* never shrink inside a flex row (cluster / button) */
    width: 20px;                      /* md — the default size */
    height: 20px;
    color: var(--theme-primary, var(--theme-primary-default));     /* themed, fallback Cobalt 500 */
}

.psw-btn .psw-icon {
    color: currentColor;
}

.psw-icon--sm  { width: 16px; height: 16px; }  /* Figma: Icon/Small    */
.psw-icon--md  { width: 20px; height: 20px; }  /* Figma: Icon/Medium   */
.psw-icon--lg  { width: 24px; height: 24px; }  /* Figma: Icon/Large    */
/* X Large / XX Large — only the curated 11 avatar icons ship at these sizes
   (static/widget/icons/xlarge, xxlarge); used inside xl/xxl item avatars. */
.psw-icon--xl  { width: 40px; height: 40px; }  /* Figma: Icon/X Large  */
.psw-icon--xxl { width: 56px; height: 56px; }  /* Figma: Icon/XX Large */
}