/// Provides styles for the InfoBox element.
/// @group layout
/// @author Richard Davis
/// @example
///   // An informational box that presents labelled content.
///   <div class="InfoBox">
///     <div class="InfoBox__group">
///       <p class="InfoBox__label">Lorem</p>
///       <p class="InfoBox__content">This is example info box content.</p>
///     </div>
///   </div>
.InfoBox {
  width: 97%;
  margin-left: auto;
  margin-right: auto;

  @include breakpoint-m {
    width: 75%;
  }

  &__group {
    padding: spacing-size(1);
    margin: spacing-size(4) spacing-size(1);
    border: 2px solid $black;
    border-radius: $base-border-radius;
  }

  &__label {
    display: block;
    font-family: $heading-semibold-font-family;
    text-transform: uppercase;
    text-align: center;
    width: spacing-size(6) * 2;
    background-color: white;
    margin-top: (-2 * spacing-size(2));
  }

  &__content {
    text-align: center;
    padding-top: spacing-size(2);
    padding-bottom: spacing-size(2);

    p {
      margin: 0;
    }
  }
}