.balance-display {
  --icon-alignment: center;
  --icon-size: var(--boxel-icon-sm);
  --name-font-size: var(--boxel-font-size);
  --name-line-height: calc(22 / 16);
  --balance-font-size: var(--boxel-font-size);
  --balance-line-height: calc(22 / 16);
  --large-text-color: var(--boxel-dark);
  --small-text-color: var(--boxel-purple-500);

  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.balance-display__icon {
  align-self: var(--icon-alignment);
  flex-shrink: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  margin-right: var(--boxel-sp-xs);
}

.balance-display__icon--lg {
  --icon-alignment: flex-start;
  --icon-size: var(--boxel-icon-lg);
}

.balance-display__name {
  font-weight: 700;
  font-size: var(--name-font-size);
  line-height: var(--name-line-height);
  letter-spacing: var(--boxel-lsp-xs);
}

.balance-display__name--sm {
  --name-font-size: var(--boxel-font-size-sm);
  --name-line-height: calc(18 / 13);
}

.balance-display__name--lg {
  --name-font-size: 1.25rem;
  --name-line-height: calc(27 / 20);
}

.balance-display__balance {
  font-size: var(--balance-font-size);
  line-height: var(--balance-line-height);
  letter-spacing: var(--boxel-lsp-xs);
}

.balance-display__balance--lg {
  --balance-font-size: 1.25rem;
  --balance-line-height: calc(27 / 20);

  color: var(--large-text-color);
  font-weight: 700;
}

.balance-display__balance--sm {
  --balance-font-size: var(--boxel-font-size-sm);
  --balance-line-height: calc(18 / 13);

  color: var(--small-text-color);
}

.balance-display__text {
  color: var(--small-text-color);
  font: var(--boxel-font-sm);
  letter-spacing: var(--boxel-lsp-xs);
}