// vf-stack

@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-stack.variables.scss';

/*
 *
 * vf-stack
 * heavily inspired by: https://every-layout.dev/layouts/stack/
 *
 * 1. removes bottom margin for any child of the vf-stack component.
 * 2. default for when browsers don't support CSS custom properties.
 * 3. removes top margin for any child of the vf-stack component.
 *
 */

[class^='vf-stack'] > * {
  margin-bottom: 0; /* [1] */
  margin-top: 0; /* [2] */
}

// Sets a null vf-stack at the lowest css specificity
.vf-stack > * + * > * {
  --vf-stack-margin: 0;
}

.vf-stack > * + * {
  --vf-stack-margin: #{map-get($vf-spacing-map, vf-spacing--400)};
  margin-top: #{map-get($vf-spacing-map, vf-spacing--400)}; /* IE Fallback */
  margin-top: var(--vf-stack-margin--custom, var(--vf-stack-margin, #{map-get($vf-spacing-map, vf-spacing--400)})); /* [3] */
}

.vf-stack--200 > * + * {
  --vf-stack-margin: #{map-get($vf-spacing-map, vf-spacing--200)};
}

.vf-stack--400 > * + * {
  --vf-stack-margin: #{map-get($vf-spacing-map, vf-spacing--400)};
}

.vf-stack--500 > * + * {
  --vf-stack-margin: #{map-get($vf-spacing-map, vf-spacing--500)};
}

.vf-stack--600 > * + * {
  --vf-stack-margin: #{map-get($vf-spacing-map, vf-spacing--600)};
}

.vf-stack--800 > * + * {
  --vf-stack-margin: #{map-get($vf-spacing-map, vf-spacing--800)};
}

.vf-stack--1200 > * + * {
  --vf-stack-margin: #{map-get($vf-spacing-map, vf-spacing--1200)};
}

.vf-stack--1600 > * + * {
  --vf-stack-margin: #{map-get($vf-spacing-map, vf-spacing--1600)};
}

// vf-stack should not apply between a hero and vf-u-fullbleed
.vf-stack > .vf-hero + .vf-u-fullbleed {
  margin-top: unset !important;
}