@use 'sass:math';

.a-label {
  display: inline-block;

  &__helper {
    color: $label-helper;
    font-size: math.div(16px, $base-font-size-px) + rem;
    font-weight: normal;

    &--block {
      display: block;

      // Add a gap between the label helper and label.
      margin-top: math.div(10px, $size-vi) + em;
    }
  }

  &--heading {
    @include h4;

    $font-size: $size-iv;

    display: block;

    // Overwrites heading-4 margin.
    margin-bottom: math.div(10px, $font-size) + em;

    // Add a gap between the label helper and label heading
    .a-label__helper--block {
      margin-top: math.div(10px, $base-font-size-px) + rem;
    }
  }
}