$gutter-size: 4px;
$handle-size: 8px;
$handle-offset: ($handle-size - $gutter-size) * .5;

.mtx-split {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  overflow: hidden;
  width: 100%;
  height: 100%;

  > .mtx-split-gutter {
    position: relative;
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;

    > .mtx-split-gutter-handle {
      position: absolute;
      opacity: 0;
    }
  }

  > .mtx-split-pane {
    flex-grow: 0;
    flex-shrink: 0;
    overflow-x: hidden;
    overflow-y: auto;

    /* When <mtx-split-pane [visible]="false"> force size to 0. */

    &.mtx-split-pane-hidden {
      flex: 0 1 0 !important;
      overflow-x: hidden;
      overflow-y: hidden;
    }
  }

  &.mtx-split-horizontal {
    flex-direction: row;

    > .mtx-split-gutter {
      flex-direction: row;
      height: 100%; // <- Fix safari bug about gutter height when direction is horizontal.
      cursor: col-resize;

      > .mtx-split-gutter-handle {
        width: $handle-size;
        height: 100%;
        left: -$handle-offset;
        right: $handle-offset;
      }
    }

    > .mtx-split-pane {
      height: 100%;
    }
  }

  &.mtx-split-vertical {
    flex-direction: column;

    > .mtx-split-gutter {
      flex-direction: column;
      width: 100%;
      cursor: row-resize;

      > .mtx-split-gutter-handle {
        width: 100%;
        height: $handle-size;
        top: -$handle-offset;
        bottom: $handle-offset;
      }
    }

    > .mtx-split-pane {
      width: 100%;

      &.mtx-split-pane-hidden {
        max-width: 0;
      }
    }
  }

  /* When disabled remove gutters background image and specific cursor. */

  &.mtx-split-disabled {
    > .mtx-split-gutter {
      cursor: default;

      .mtx-split-gutter-handle {
        background-image: none;
      }
    }
  }

  /* Add transition only when transition enabled + split initialized + not currently dragging. */

  &.mtx-split-transition.mtx-split-init:not(.mtx-dragging) {
    > .mtx-split-gutter,
    > .mtx-split-pane {
      transition: flex-basis .3s;
    }
  }
}