@use "design";

.hLabeledValues {
  display: flex;
  align-items: center;
  gap: 1rem;

  &.spaceBetweenJustified {
    justify-content: space-between;

    // Order here matters, because we want the first to be
    // left aligned when there's actually only one

    text-align: center;

    > :last-child {
      text-align: right;
    }

    > :first-child {
      text-align: left;
    }
  }

  dt {
    color: design.$color-on-surface-variant;
    @include design.font-smaller;
  }

  &.largeHLabeledValues {
    dd {
      @include design.fontH3;
      color: design.$color-on-surface;
    }
  }

  &.tinyHLabeledValues {
    dd {
      @include design.font-smaller;
    }
  }
}