// vf-sidebar

@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')}
 * Build time: #{map-get($componentInfo, 'buildTimeStamp')}
 */

@import 'vf-sidebar.variables.scss';

// You need to add this Sass file to ./components/vf-componenet-rollup/index.scss
// @import 'vf-sidebar/vf-sidebar.scss';
.vf-sidebar {
  overflow: hidden;
}

.vf-sidebar > * {
  display: flex;
  flex-wrap: wrap;
  margin: calc(var(--vf-sidebar-spacing, #{space(400)}) / 2 * -1);
}

.vf-sidebar > * > * {
  flex-grow: 1;
  margin: calc(var(--vf-sidebar-spacing, #{space(400)}) / 2);
}

.vf-sidebar--end > * > :first-child {
  flex-basis: 0;
  flex-grow: 999;
  min-width: calc(var(--vf-sidebar-main-width, 50%) - var(--vf-sidebar-spacing, #{space(400)}) );
}

.vf-sidebar--start > * > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-width: calc(var(--vf-sidebar-main-width, 50%) - var(--vf-sidebar-spacing, #{space(400)}) );
}

.vf-sidebar--400 {
  --vf-sidebar-spacing: #{space(400)};
}
.vf-sidebar--600 {
  --vf-sidebar-spacing: #{space(600)};
}
.vf-sidebar--800 {
  --vf-sidebar-spacing: #{space(800)};
}