/* ==========================================================================
   EasyShirt Official Icon System CSS Tokens
   Source: Figma Make
   ========================================================================== */

:root {
  /* Light Theme */
  --es-icon-default: #1e293b;
  --es-icon-active: #ea580c;
  --es-icon-muted: #64748b;
  --es-icon-disabled: #94a3b8;
}

/* Base icon styling */
.es-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  flex-shrink: 0;
  stroke: currentColor;
  transition: color 0.15s ease, stroke 0.15s ease, transform 0.15s ease;
}

/* Size tokens */
.es-icon--16 {
  width: 16px;
  height: 16px;
}

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

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

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

/* State tokens */
.es-icon--default {
  color: var(--es-icon-default);
}

.es-icon--active {
  color: var(--es-icon-active) !important;
}

.es-icon--muted {
  color: var(--es-icon-muted);
}

.es-icon--disabled {
  color: var(--es-icon-disabled);
  opacity: 0.6;
  pointer-events: none;
}

/* Hover behaviors */
button:hover > .es-icon--default,
a:hover > .es-icon--default,
.nav-item:hover > .es-icon--default,
.portal-nav-btn:hover > .es-icon--default {
  color: var(--es-icon-active);
}

/* Active navigation item */
.nav-item.active > .es-icon,
.portal-nav-btn.active > .es-icon,
.portal-tab-btn.active > .es-icon {
  color: var(--es-icon-active) !important;
}

/* Helper utility classes for buttons and cards */
.btn-icon-mr {
  margin-right: 6px;
  vertical-align: middle;
}

.empty-state-es-icon {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--es-icon-muted);
}

.cart-icon-slot {
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
}

.doc-btn-icon {
  margin-right: 8px;
  flex-shrink: 0;
}

.kpi-icon > .es-icon {
  margin-bottom: 4px;
}

.portal-nav-icon > .es-icon {
  margin-right: 10px;
}