$NeosPanel: (
    Controls: 82px,
    Preview: 192px,
    MenuSticky: 54px,
    Navigate: 321px,
    Inspector: 321px
  )
  !default;
$NeosPanelPrepend: '' !default;

@mixin NeosPanelLeft($property: 'left', $addon: 0) {
  @if $addon != 0 {
    #{$NeosPanelPrepend} .neos-menu-panel-sticky & {
      #{$property}: calc(#{map-get($NeosPanel, MenuSticky)} + #{$addon});
    }

    #{$NeosPanelPrepend} .neos-navigate-panel-open & {
      #{$property}: calc(#{map-get($NeosPanel, Navigate)} + #{$addon});
    }

    #{$NeosPanelPrepend} .neos-menu-panel-sticky.neos-navigate-panel-open & {
      #{$property}: calc(
        #{map-get($NeosPanel, MenuSticky)} + #{map-get($NeosPanel, Navigate)} +
          #{$addon}
      );
    }

    #{$NeosPanelPrepend} .neos-full-screen & {
      #{$property}: $addon;
    }
  } @else {
    #{$NeosPanelPrepend} .neos-menu-panel-sticky & {
      #{$property}: map-get($NeosPanel, MenuSticky);
    }

    #{$NeosPanelPrepend} .neos-navigate-panel-open & {
      #{$property}: map-get($NeosPanel, Navigate);
    }

    #{$NeosPanelPrepend} .neos-menu-panel-sticky.neos-navigate-panel-open & {
      #{$property}: map-get($NeosPanel, MenuSticky) +
        map-get($NeosPanel, Navigate);
    }

    #{$NeosPanelPrepend} .neos-full-screen & {
      #{$property}: 0;
    }
  }
}

@mixin NeosPanelRight($property: 'right', $addon: 0) {
  @if $addon != 0 {
    #{$NeosPanelPrepend} .neos-inspector-panel-open & {
      #{$property}: calc(#{map-get($NeosPanel, Inspector)} + #{$addon});
    }

    #{$NeosPanelPrepend} .neos-full-screen & {
      #{$property}: $addon;
    }
  } @else {
    #{$NeosPanelPrepend} .neos-inspector-panel-open & {
      #{$property}: map-get($NeosPanel, Inspector);
    }

    #{$NeosPanelPrepend} .neos-full-screen & {
      #{$property}: 0;
    }
  }
}

@mixin NeosPanelTop($property: 'top', $addon: 0) {
  @if $addon != 0 {
    .neos-controls & {
      #{$property}: calc(#{map-get($NeosPanel, Controls)} + #{$addon});
    }

    .neos-edit-preview-panel-open & {
      #{$property}: calc(#{map-get($NeosPanel, Preview)} + #{$addon});
    }

    .neos-full-screen & {
      #{$property}: $addon;
    }
  } @else {
    .neos-controls & {
      #{$property}: map-get($NeosPanel, Controls);
    }

    .neos-edit-preview-panel-open & {
      #{$property}: map-get($NeosPanel, Preview);
    }

    .neos-full-screen & {
      #{$property}: 0;
    }
  }
}

@mixin NeosPanelHeight($property: 'height', $height: 100vh, $addon: 0) {
  @if $addon != 0 {
    .neos-controls & {
      #{$property}: calc(
        #{$height} - #{map-get($NeosPanel, Controls)} - #{$addon}
      );
    }

    .neos-edit-preview-panel-open & {
      #{$property}: calc(
        #{$height} - #{map-get($NeosPanel, Preview)} - #{$addon}
      );
    }

    .neos-full-screen & {
      #{$property}: calc(#{$height} - #{$addon});
    }
  } @else {
    .neos-controls & {
      #{$property}: calc(#{$height} - #{map-get($NeosPanel, Controls)});
    }

    .neos-edit-preview-panel-open & {
      #{$property}: calc(#{$height} - #{map-get($NeosPanel, Preview)});
    }

    .neos-full-screen & {
      #{$property}: $height;
    }
  }
}