@salla.sa/twilight-components/dist/collection/components/salla-wallet/salla-wallet.css

Salla Web Component

.s-wallet-table {
  min-width: 100%;
}
.s-wallet-table-balance-container {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 1rem;
}
.s-wallet-table-balance-icon {
  border-radius: 50%;
  width: 52px;
  height: 52px;
  font-size: 25px;
  padding: 16px 13px;
  background: var(--color-primary-reverse);
  color: var(--color-primary);
}
.s-wallet-table-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.s-wallet-table-empty-state i {
  font-size: 80px;
  margin: 4rem 0 2rem;
  color: var(--infinte-color);
}
.s-wallet-table-transaction-status {
  padding: 6px 19px !important;
  border-radius: 20px;
  width: max-content;
  display: flex;
  align-items: center;
}
.s-wallet-table-transaction-status-default {
  background: #fff6eb;
  color: #a46f29;
}
.s-wallet-table-transaction-status-cashback {
  background: #effbf6;
  color: #00af6c;
}
.s-wallet-table-transaction-status-refund {
  background: #ecf3fe;
  color: #5196f3;
}
.s-wallet-table-transaction-status-purchase {
  background: #feecec;
  color: #f55157;
}
.s-wallet-table-transaction-status-icons-success {
  color: #00af6c;
}