@import "../../themes/ionic.globals";

// Split Pane
// --------------------------------------------------

$split-pane-side-min-width: 270px !default;
$split-pane-side-max-width: 28% !default;

.split-pane {
  @include position(0, 0, 0, 0);

  position: absolute;

  display: flex;

  flex-direction: row;
  flex-wrap: nowrap;

  contain: strict;
}

.split-pane-side:not(ion-menu) {
  display: none;
}

.split-pane-visible >.split-pane-side,
.split-pane-visible >.split-pane-main {
  @include position(0, 0, 0, 0);

  // scss-lint:disable ImportantRule
  position: relative;

  z-index: 0;

  flex: 1;

  box-shadow: none !important;
}

.split-pane-visible >.split-pane-side {
  flex-shrink: 0;

  order: -1;
}

.split-pane-visible >.split-pane-main,
.split-pane-visible >ion-nav.split-pane-side,
.split-pane-visible >ion-tabs.split-pane-side,
.split-pane-visible >ion-menu.menu-enabled {
  display: block;
}

.split-pane-visible >ion-split-pane.split-pane-side,
.split-pane-visible >ion-split-pane.split-pane-main {
  display: flex;
}

.split-pane-visible >ion-menu.menu-enabled {
  >.menu-inner {
    @include position-horizontal(0, 0);

    // scss-lint:disable ImportantRule
    width: auto;

    box-shadow: none !important;
    transform: none !important;
  }

  >.ion-backdrop {
    // scss-lint:disable ImportantRule
    display: hidden !important;
  }
}

.split-pane-visible >.split-pane-side[side=start] {
  @include multi-dir() {
    order: -1;
  }
}

.split-pane-visible >.split-pane-side[side=end] {
  @include multi-dir() {
    order: 1;
  }
}

.split-pane-visible >.split-pane-side[side=left] {
  @include ltr() {
    order: -1;
  }

  @include rtl() {
    order: 1;
  }
}

.split-pane-visible >.split-pane-side[side=right] {
  @include ltr() {
    order: 1;
  }

  @include rtl() {
    order: -1;
  }
}