.transaction-amount {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;

  &.inflow {
    color: var(--mat-sys-primary);
  }

  &.outflow {
    color: var(--mat-sys-error);
  }

  &.neutral {
    color: var(--mat-sys-on-surface-variant);
  }
}

.transaction-amount__direction {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.transaction-amount__sign {
  display: inline-block;
  min-width: 0.8ch;
}
