:host {
  display: block;
}

.wb-layout {
  display: flex;
  --wb-layout__flex-direction--value: var(--wb-layout__flex-direction--override, var(--wb-layout__flex-direction));
  --wb-layout__flex-wrap--value: var(--wb-layout__flex-wrap--override, var(--wb-layout__flex-wrap));
  --wb-layout__justify-content--value: var(--wb-layout__justify-content--override, var(--wb-layout__justify-content));
  --wb-layout__align-content--value: var(--wb-layout__align-content--override, var(--wb-layout__align-content));
  --wb-layout__align-items--value: var(--wb-layout__align-items--override, var(--wb-layout__align-items));
  --wb-layout__gutter-width--value: var(--wb-layout__gutter-width--override, var(--wb-layout__gutter-width, var(--wb-ds-grid__gutter-x)));
  --wb-layout__gutter-height--value: var(--wb-layout__gutter-height--override, var(--wb-layout__gutter-height, var(--wb-ds-grid__gutter-y)));
  flex-direction: var(--wb-layout__flex-direction--value);
  flex-wrap: var(--wb-layout__flex-wrap--value);
  justify-content: var(--wb-layout__justify-content--value);
  align-content: var(--wb-layout__align-content--value);
  align-items: var(--wb-layout__align-items--value);
  gutter-width: var(--wb-layout__gutter-width--value);
  gutter-height: var(--wb-layout__gutter-height--value);
}

::slotted(*) {
  --wb-layout__gutter-height--override: initial;
  --wb-layout__gutter-width--override: initial;
  box-sizing: border-box;
  margin-top: var(--wb-layout__gutter-height--value);
  margin-left: var(--wb-layout__gutter-width--value);
}

:host(:not([no-gutter])) .wb-layout {
  margin-top: calc(var(--wb-layout__gutter-height--value) * -1);
  margin-left: calc(var(--wb-layout__gutter-width--value) * -1);
}