:host {
  display: block;
  height: 100%;
}

.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;

  &[data-status="Member"]   { background: #d4edda; color: #155724; }
  &[data-status="Visitor"]  { background: #cce5ff; color: #004085; }
  &[data-status="Inactive"] { background: #e2e3e5; color: #383d41; }
  &[data-status="Former"]   { background: #ffeeba; color: #856404; }
}

.account-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;

  &.has-account { background: #d4edda; color: #155724; }
  &.no-account  { background: #e2e3e5; color: #383d41; }
}
