.card-pay-labeled-value {
  display: grid;
  grid-template-columns: var(--field-label-width, minmax(4rem, 25%)) 1fr;
  gap: var(--boxel-sp-sm) var(--boxel-sp-lg);
}

.card-pay-labeled-value--compact {
  --field-label-width: 2.5rem;

  row-gap: 0;
}

.card-pay-labeled-value__label {
  margin-top: 2px;
}

.card-pay-labeled-value__contents {
  font: var(--boxel-font);
  letter-spacing: var(--boxel-lsp-sm);
}

/*
  hardcode max-width to a value that should break at 21 characters.
  this creates a display that matches the spec at full width but
  still respects flow
 */
.card-pay-labeled-value--address .card-pay-labeled-value__contents {
  font-family: var(--boxel-monospace-font-family);
  max-width: 22ch;
  word-break: break-all;
}

.card-pay-labeled-value--has-icon .card-pay-labeled-value__contents {
  display: flex;
  align-items: center;
}

/* utility class used for small icons - currency, and the check mark */
.card-pay-labeled-value__small-icon {
  width: var(--boxel-icon-sm);
  height: var(--boxel-icon-sm);
  margin-right: var(--boxel-sp-xxs);
}

.card-pay-labeled-value--vertical {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.card-pay-labeled-value--vertical .card-pay-labeled-value__label {
  color: var(--boxel-purple-400);
  font: 600 var(--boxel-font-xs);
  letter-spacing: var(--boxel-lsp-xl);
  text-transform: uppercase;
  margin-bottom: var(--boxel-sp-xxxs);
}

.card-pay-labeled-value--vertical.card-pay-labeled-value--has-block .card-pay-labeled-value__label {
  margin-bottom: var(--boxel-sp-xs);
}