@use 'sass:math';
@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;

$meta-header-item-gap: 21px;

.m-meta-header {
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: wrap-reverse;
  row-gap: math.div(10px, $base-font-size-px) + rem;
  column-gap: math.div($meta-header-item-gap, $base-font-size-px) + rem;
  width: fit-content;
  padding-bottom: math.div(10px, $base-font-size-px) + rem;

  // Dividers are to the left of content, so this crops the unneeded 1st one.
  overflow: hidden;

  &__item-group {
    display: flex;
    flex-wrap: wrap;
    column-gap: math.div($meta-header-item-gap, $base-font-size-px) + rem;
  }

  &__item {
    // Use grid to indent the text from the icon when it wraps.
    display: grid;
    grid-template-columns: 0 auto 1fr;
    row-gap: math.div(5px, $base-font-size-px) + rem;
    text-wrap: balance;

    margin-bottom: 0;

    @include heading-4($has-margin-bottom: false);

    // Mobile only.
    @include respond-to-max($bp-xs-max) {
      // Override h4 bottom margin at mobile size.
      margin-bottom: math.div(5px, $base-font-size-px) + rem;
    }

    .cf-icon-svg {
      margin-right: math.div(5px, $base-font-size-px) + rem;
    }

    // Create the divider.
    &::before {
      content: '|';
      margin-left: math.div(-13px, $base-font-size-px) + rem;
    }

    // Adjustments to default date position.
    .a-date {
      font-size: math.div(14px, $base-font-size-px) + rem;
      line-height: math.div(24, 14);
      margin-bottom: 0;
    }
  }

  // Tablet and above.
  @include respond-to-min($bp-sm-min) {
    flex-direction: row;
  }
}