/* EmptyState Component Styles */

.mint-empty-state {
  padding: 2rem;
}

.mint-empty-state--illustrated {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.mint-empty-state--inline {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-md);
  background-color: var(--bg-secondary);
  text-align: left;
}

/* Sizes (illustrated only — inline is single size) */
.mint-empty-state--sm { padding: 1rem; }
.mint-empty-state--md { padding: 2rem; }
.mint-empty-state--lg { padding: 3rem; }

/* Inline overrides size-based padding to keep it compact */
.mint-empty-state--inline.mint-empty-state--sm,
.mint-empty-state--inline.mint-empty-state--md,
.mint-empty-state--inline.mint-empty-state--lg {
  padding: 1rem 1.25rem;
}

/* Icon wrapper — illustrated: 40px neutral tile (2g). Semantic color survives
   only in the warning / error variants. */
.mint-empty-state--illustrated .mint-empty-state__icon-wrapper {
  width: 40px;
  height: 40px;
  margin-bottom: 0.625rem;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mint-empty-state__icon-wrapper--primary,
.mint-empty-state__icon-wrapper--cta,
.mint-empty-state__icon-wrapper--success,
.mint-empty-state__icon-wrapper--muted {
  background: var(--bg-tertiary);
}

.mint-empty-state__icon-wrapper--warning { background: var(--mint-warning-bg); }
.mint-empty-state__icon-wrapper--error   { background: var(--mint-error-bg); }

/* Inline: 44x44 icon box (left-aligned) */
.mint-empty-state--inline .mint-empty-state__icon-wrapper {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Icon sizes */
.mint-empty-state__icon { width: 20px; height: 20px; stroke-width: 1.7; }

/* Icon colors */
.mint-empty-state__icon--primary,
.mint-empty-state__icon--cta,
.mint-empty-state__icon--success,
.mint-empty-state__icon--muted   { color: var(--text-secondary); }
.mint-empty-state__icon--warning { color: var(--mint-warning); }
.mint-empty-state__icon--error   { color: var(--mint-error); }

/* Body wrapper — in inline this is the flex-grow region */
.mint-empty-state--inline .mint-empty-state__body {
  flex: 1;
  min-width: 0;
}

/* Title */
.mint-empty-state__title {
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 0 !important;
  margin-bottom: 0.125rem !important;
  padding: 0 !important;
}

.mint-empty-state--sm .mint-empty-state__title { font-size: 0.8125rem; }
.mint-empty-state--md .mint-empty-state__title { font-size: 0.875rem; }
.mint-empty-state--lg .mint-empty-state__title { font-size: 1rem; }
.mint-empty-state--inline .mint-empty-state__title { font-size: 0.875rem; }

/* Description */
.mint-empty-state__description {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  max-width: 28rem;
  line-height: 1.5;
  margin: 0 !important;
  padding: 0 !important;
}

.mint-empty-state--inline .mint-empty-state__description {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Action — slotted content sits in a block so a child's own larger top margin collapses into this one. */
.mint-empty-state--illustrated .mint-empty-state__action,
.mint-empty-state--illustrated .mint-empty-state__content {
  margin-top: 0.625rem;
}

.mint-empty-state--inline .mint-empty-state__action {
  flex-shrink: 0;
}