@layer base {
  .status-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 9999px;
    text-transform: capitalize;
  }

  .status-pending {
    background-color: #fef3c7;
    color: #92400e;
  }
  .status-label_created {
    background-color: #fef3c7;
    color: #92400e;
  }

  .status-approved {
    background-color: #dcfce7;
    color: #166534;
  }
  .status-in_transit {
    background-color: #dbeafe;
    color: #1e40af;
  }
  .status-received {
    background-color: #e0e7ff;
    color: #3730a3;
  }
  .status-processing {
    background-color: #fae8ff;
    color: #86198f;
  }
  .status-completed {
    background-color: #dcfce7;
    color: #166534;
  }
  .status-rejected {
    background-color: #fef2f2;
    color: #991b1b;
  }
  .status-cancelled {
    background-color: #f1f5f9;
    color: #475569;
  }
  .status-unknown {
    background-color: #f1f5f9;
    color: #475569;
  }

  .status-under_review {
    background-color: #fef3c7;
    color: #92400e;
  }
  .status-denied {
    background-color: #fef2f2;
    color: #991b1b;
  }
  .status-resolved {
    background-color: #dcfce7;
    color: #166534;
  }
  .status-active {
    background-color: #dcfce7;
    color: #166534;
  }
  .status-inactive {
    background-color: #f1f5f9;
    color: #475569;
  }
  .status-closed {
    background-color: #dcfce7;
    color: #166534;
  }
  .status-delivered {
    background-color: #dcfce7;
    color: #166534;
  }
  .status-awaiting_payment {
    background-color: #fef3c7;
    color: #92400e;
  }

  .role-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    text-transform: capitalize;
  }

  .role-owner {
    background-color: #fae8ff;
    color: #86198f;
  }
  .role-admin {
    background-color: #dbeafe;
    color: #1e40af;
  }
  .role-member {
    background-color: #f1f5f9;
    color: #475569;
  }
}