// vf-article-meta-information

@import 'package.variables.scss';
// Debug information from component's `package.json`:
// ---
/*!
 * Component: #{map-get($componentInfo, 'name')}
 * Version: #{map-get($componentInfo, 'version')}
 * Location: #{map-get($componentInfo, 'location')}
 */

.vf-article-meta-information {
  display: grid;

  & > div {
    margin: 0 8px;
    margin-bottom: 12px;
    padding-top: 12px;
  }

  & > div + div {
    border-top: 1px solid color(grey--lightest);
  }
}

.vf-article-meta-info__author {
  align-content: center;
  display: inline-flex;

  .vf-author__name {
    @include set-type(text-body--3, $custom-margin-bottom: 0);

    align-self: center;
    line-height: 1.3;
    margin: 0 0 0 8px;
  }

  .vf-author__title {
    align-self: center;
    margin: 0 0 0 8px;
  }

  .vf-author--avatar,
  .vf-link.vf-author--avatar__link {
    border-radius: 500px;
    height: 48px;
    order: -1;
    width: 48px;
  }

  .vf-link.vf-author--avatar__link .vf-author--avatar {
    border-width: 0;
  }

}

.vf-meta__details {
  .vf-meta__topics {
    color: color(grey);
    margin: 0 0 4px 0;
    .vf-link {
      color: inherit;
      position: relative;
    }
    .vf-link:nth-last-child(n+2),
    .vf-link:nth-last-child(n+2) ~ .vf-link {
      margin-right: 4px;

      &::before {
        content: ',';
        position: absolute;
        right: -4px;
      }
    }

    .vf-link:last-of-type {
      &::before {
        content: '' !important;
      }
    }
  }

  .vf-meta__date {
    @include set-type(text-body--3, $custom-margin-bottom: 4px);

    color: color(grey);
  }
}


.vf-article-meta-info__links {
  padding: 0;

  .vf-text {
    @include set-type(text-body--3, $custom-margin-bottom: 8px);

    color: color(grey);
  }

  .vf-link {
    display: block;
    margin-bottom: 4px;
  }
}

.vf-meta__text {
  @include set-type(text-body--3, $custom-margin-bottom: 0);
  color: color(grey);
}