// vf-summary

@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')}
 */

@import 'vf-summary.variables.scss';

.vf-summary {
  align-self: start;
  column-gap: 16px;
  display: grid;
  margin-bottom: $vf-summary-margin-bottom;
  position: relative;

  & > *:last-child {
    margin-bottom: 0;
  }
}

.vf-summary__category {
  --vf-text-margin--bottom: 0;

  @include set-type($vf-summary__category-typography);

  color: set-color($vf-summary__category-color--text);
  margin-bottom: 0;
}

.vf-summary__date {
  @include set-type($vf-summary__date-typography);

  color: set-color($vf-summary__date-color--text);
}

.vf-summary__source {
  @include set-type($vf-summary__date-typography);

  color: set-color($vf-summary__date-color--text);
  font-style: italic;
}

.vf-summary__link {
  @include inline-link();
}

.vf-summary__link--overlay {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.vf-summary__meta {
  @include set-type($vf-summary__meta-typography);
}

.vf-summary__text {
  @include set-type($vf-summary__body-typography);
}

.vf-summary__title {
  @include set-type($vf-summary__title-typography);
  font-weight: 400;
}

.vf-summary__author {
  @include set-type($vf-summary__author-typography);

  color: set-color($vf-summary__author-color--text);
  font-style: italic;
}