// vf-section-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-section-header__heading {
  @include set-type(text-heading--3, $custom-margin-bottom: 0);

  & + .vf-section-header__subheading,
  & + .vf-section-header__content {
    margin-top: map-get($vf-spacing-map, vf-spacing--500);
  }
}
.vf-section-header__heading--is-link,
.vf-section-header__heading--is-link a {
  @include inline-link($vf-link--visited-color: color-interactive());
  cursor: pointer;
  display: grid;
  grid-column-gap: space(100);
  grid-template-columns: auto 1fr;

  .vf-section-header__icon {
    fill: currentColor;
    padding-top: .1em; // to compensate for ascender, this value should be fairly consistent across most type families
    transform: translateX(map-get($vf-spacing-map, vf-spacing--100));
    // @todo: some sort of centralised and reusable docs, tokens, guidance on animations
    transition-duration: 125ms;
    transition-property: transform;
    transition-timing-function: cubic-bezier(.45, .05, .55, .95);
  }

  &:hover,
  &:focus {
    .vf-section-header__icon {
      transform: translateX(map-get($vf-spacing-map, vf-spacing--200));
    }

    &:visited {
      color: map-get($vf-colors-map, vf-color--blue--dark);
    }
  }
}

.vf-section-header__subheading {
  @include set-type(text-heading--4, $custom-margin-bottom: 0);
}

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

  a,
  .vf-link {
    @include inline-link;
  }

  &:last-of-type {
    @include margin--block(bottom, map-get($vf-spacing-map, vf-spacing--0));
  }

  .vf-section-header__heading + & {
    margin-top: 24px;
  }
  .vf-section-header__subheading + & {
    margin-top: 16px;
  }
  .vf-section-header__heading + & {
    margin-top: map-get($vf-spacing-map, vf-spacing--500);
  }
  .vf-section-header__subheading + & {
    margin-top: map-get($vf-spacing-map, vf-spacing--400);
  }
}