@mixin bleedElement($position: relative) {
  position: $position;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow-x: hidden;
}

@mixin resetBleedElement {
  width: 100%;
  margin: 0;
  left: inherit;
  right: inherit;
}

@mixin bleedElementBackend($panel: 321px, $sticky: 54px) {
  .neos-backend & {
    transition: margin-left 0.2s ease, width 0.2s ease;
  }

  .neos-navigate-panel-open:not(.neos-full-screen) &,
  .neos-inspector-panel-open:not(.neos-full-screen) & {
    width: calc(100vw - #{$panel});
    margin-left: calc(-50vw + #{($panel - 1px) / 2}); // -1px because of rounding issues
  }

  .neos-inspector-panel-open.neos-navigate-panel-open:not(.neos-full-screen) & {
    width: calc(100vw - #{$panel * 2});
    margin-left: calc(-50vw + #{$panel});
  }
}

@mixin resetBleedElementBackend {
  .neos-backend & {
    width: 100% !important;
    margin-left: 0 !important;
  }
}