// vf-page-header

@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-page-header__sub-heading-text--color: color(grey);

.vf-page-header {
  @include margin--block(bottom, map-get($vf-spacing-map, vf-spacing--500));

  display: flex;
  flex-direction: column-reverse;
}

.vf-page-header__heading {
  @include set-type(text-heading--2);
  margin: 0;
}

.vf-page-header__sub-heading {
  @include set-type(text-heading--4);
  @include margin--block(
    bottom,
    map-get($vf-spacing-map, vf-spacing-extra-tight)
  );

  color: $vf-page-header__sub-heading-text--color;
}