// vf-cluster

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

.vf-cluster {
  --vf-cluster-margin: var(--vf-cluster-margin--override, #{map-get($vf-spacing-map, vf-spacing--400)});
  overflow: hidden;
}

.vf-cluster > * {
  align-items: var(--vf-cluster-alignment, center);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: calc(var(--vf-cluster-margin) / 2 * -1) !important;
}

.vf-cluster > * > * {
  flex: var(--vf-cluster__item--flex);
  margin: #{map-get($vf-spacing-map, vf-spacing--400)};
  margin: calc( var(--vf-cluster-margin) / 2) !important;
}

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

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

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