// embl-content-hub-loader

@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 'embl-content-hub-loader.variables.scss';

// contentHub html carries an extra div that should be outside of the grid layout
.embl-grid > .vf-content-hub-html,
.embl-grid > .embl-content-hub-html,
.vf-grid > .vf-content-hub-html,
.vf-grid > .embl-content-hub-html {
  grid-column: 1 / -1;
  // @todo: this should probably just be .embl-content-hub-html, but that requires a
  //        disruptive change in the contentHub itself and will impact many systems.
  //        that change will require coordination
}
// contentHub html is sometimes placed as a direct child of `vf-body` which needs a
// different grid-column rule set.
.vf-body > .vf-content-hub-html,
.vf-body > .embl-content-hub-html {
  grid-column: main;
}

// This is to target the links that load things like the global header
.vf-stack link[data-embl-js-content-hub-loader] {
  --vf-stack-margin--custom: 0;
}

// targets anything that's loaded from content hub
// as nine times out of ten - it's ok.
.vf-content-hub-html {
  --vf-stack-margin--custom: 0;
}

// contentHub html responses are nested deep in divitis,
// so we ensure a default vf--stack applies to grid containers
.vf-stack .vf-content-hub-html .embl-grid,
.vf-stack .vf-content-hub-html .vf-grid,
.vf-stack .vf-content-hub-html .vf-content > * {
  --vf-stack-margin: 1rem;
  --vf-stack-margin--custom: 1rem;
  margin-top: var(--vf-stack-margin, 1rem);
}
.vf-stack .vf-content-hub-html .embl-grid > *,
.vf-stack .vf-content-hub-html .vf-grid > *,
.vf-stack .vf-content-hub-html .vf-content > * > * {
 --vf-stack-margin: 0;
 --vf-stack-margin--custom: 0
}