@import 'settings';

@mixin vf-p-heading-icon {
  .p-heading-icon {
    margin-bottom: $spv--x-large;

    @media (min-width: $breakpoint-heading-threshold) {
      margin-bottom: 0;
    }
  }

  .p-heading-icon__header {
    display: flex;

    &.is-stacked {
      display: inherit;
    }
  }

  .p-heading-icon__img {
    flex-shrink: 0;
    height: map-get($icon-sizes, heading-icon);
    margin-bottom: 0;
    margin-right: $sph--large;
    margin-top: calc(map-get($settings-text-h3, nudge) / 2); // just a quick fix, should be calculated based on line height and icon size
    width: map-get($icon-sizes, heading-icon);
  }

  .p-heading-icon--small {
    .p-heading-icon__img {
      height: map-get($icon-sizes, heading-icon--small);
      margin-top: map-get($settings-text-h3, nudge);
      width: map-get($icon-sizes, heading-icon--small);
    }
  }
}