/**
 * Commerce Storefront — production-owned Sleek-derived icon primitives.
 */

@layer commerce.sleek-icons {
  :root {
    --commerce-icon-size-extra-small: 0.875rem;
    --commerce-icon-size-small: 1rem;
    --commerce-icon-size-extra-medium: 1.125rem;
    --commerce-icon-size-medium: 1.25rem;
    --commerce-icon-size-large: 1.5rem;
    --commerce-icon-size-extra-large: 2rem;
    --commerce-icon-size-2xl: 2.125rem;
    --commerce-icon-size-empty-state: 3.75rem;
    --commerce-icon-stroke: 1.5;
    --commerce-icon-stroke-thick: 2;
    --commerce-icon-contrast: var(--commerce-color-canvas, currentColor);
  }

  [data-commerce-icon-system="sleek"] .commerce-icon {
    display: inline-block;
    flex: 0 0 auto;
    inline-size: var(--commerce-icon-size, var(--commerce-icon-size-medium));
    block-size: var(--commerce-icon-size, var(--commerce-icon-size-medium));
    overflow: visible;
    color: inherit;
    vertical-align: -0.125em;
  }

  [data-commerce-icon-system="sleek"] .commerce-icon--extra-small {
    --commerce-icon-size: var(--commerce-icon-size-extra-small);
  }

  [data-commerce-icon-system="sleek"] .commerce-icon--small {
    --commerce-icon-size: var(--commerce-icon-size-small);
  }

  [data-commerce-icon-system="sleek"] .commerce-icon--extra-medium {
    --commerce-icon-size: var(--commerce-icon-size-extra-medium);
  }

  [data-commerce-icon-system="sleek"] .commerce-icon--medium {
    --commerce-icon-size: var(--commerce-icon-size-medium);
  }

  [data-commerce-icon-system="sleek"] .commerce-icon--large {
    --commerce-icon-size: var(--commerce-icon-size-large);
  }

  [data-commerce-icon-system="sleek"] .commerce-icon--extra-large {
    --commerce-icon-size: var(--commerce-icon-size-extra-large);
  }

  [data-commerce-icon-system="sleek"] .commerce-icon--2xl {
    --commerce-icon-size: var(--commerce-icon-size-2xl);
  }

  [data-commerce-icon-system="sleek"] .commerce-icon--empty-state {
    --commerce-icon-size: var(--commerce-icon-size-empty-state);
  }

  [data-commerce-icon-system="sleek"] .commerce-icon--rtl-flip:dir(rtl) {
    transform: scaleX(-1);
  }
}