@use 'sass:color';

$navigation-arrow-background: $white !default;
$navigation-icon-background-hover: $primary !default;
$navigation-icon-border-hover: rgba(0, 123, 255, .5) !default;
$splitter-border-color: $gray-300 !default;
$splitter-background-color: #fff !default;
$splitpane-font-size: 14px !default;
$splitpane-font-weight: normal !default;
$splitpane-font-family: $font-family !default;
$splitpane-font-color:  $gray-900 !default;
$splitbar-border-color: $gray-300 !default;
$splitbar-hover-border-color: $primary !default;
$resize-icon-hover-color: $splitbar-hover-border-color !default;
$splitbar-icon-color: $gray-700 !default;
$splitbar-icon-size: 14px !default;
$collapse-icon-bg-color: $white !default;
$splitbar-icon-gap: 18px !default;
$splitbar-icon-height: 18px !default;
$resize-icon-bg-color: $white !default;
$split-bar-border-left: none !default;
$split-bar-border-right: none !default;
$split-bar-hover-border-left: none !default;
$split-bar-hover-border-right: none !default;
$splitbar-border-width: 1px !default;
$splitbar-arrow-border-radius: 50% !default;
$splitbar-resizable-height: 100% !default;
$splitbar-arrow-height: 26px !default;
$splitbar-arrow-segment-radius: 16px !default;
$splitbar-arrow-segment-height: 8px !default;
$splitbar-vertical-resizable-height: 16px !default;
$splitbar-vertical-handler-height: 1px !default;
$splitter-border-none: 0 !default;
$split-bar-vertical-navigate-arrow-margin-top: -2px !default;
$split-bar-vertical-navigate-arrow-down-margin-top: 2px !default;
$split-bar-horizontal-navigate-arrow-padding: 1px 12px !default;
$splitbar-horizontal-last-bar-margin: 0 3px !default;
$splitbar-horizontal-bar-margin: 0 0 0 3px !default;
$split-bar-vertical-navigate-arrow-padding: 10px 3px 10px 18px !default;
$split-bar-horizontal-navigate-arrow-left-margin-left: -26px !default;
$splitbar-vertical-last-bar-margin: 3px 0 !default;
$splitbar-vertical-bar-margin: 3px 0 0 !default;
$splitter-navigate-arrow-left: 5px !default;
$splitter-navigate-arrow-right: 5px !default;
$splitter-horizontal-navigate-arrow-right: 8px !default;
$splitter-navigate-arrow-transform-origin-before: 1px 7px 0 !default;
$splitter-navigate-arrow-top-before: 5px !default;
$splitter-navigate-arrow-transform-origin-after: 1px 1px 0 !default;
$splitter-navigate-arrow-top-after: 11px !default;
$splitter-navigate-arrow-width: 2px !default;
$splitter-navigate-right-arrow-left: 8px !default;
$splitter-navigate-right-arrow-right: 3px !default;
$splitter-vertical-navigate-arrow-topbottom: 20px !default;
$splitter-vertical-navigate-arrow-left: 22px !default;
$splitter-vertical-navigate-arrow-up-top-before: 3px !default;
$splitter-vertical-navigate-arrow-up-transform-origin-before: 2px 7px 0 !default;
$splitter-vertical-navigate-arrow-up-top-after: 8px !default;
$splitter-vertical-navigate-arrow-up-transform-origin-after: 1px 1px 0 !default;
$splitter-vertical-navarrow-up-left: 10px !default;
$splitter-vertical-navarrow-up-left-after: 11px !default;
$splitter-vertical-navigate-arrow-down-left-after: 10px !default;
$splitter-vertical-navigate-arrow-down-top-after: 12px !default;
$splitter-vertical-navarrow-transform-origin-after: 1px 2px 0 !default;
$splitter-vertical-navigate-arrow-down-left-before: 12px !default;
$splitter-vertical-navigate-arrow-down-top-before: 8px !default;
$splitter-vertical-navarrow-transform-origin-before: 1px 6px 0 !default;
$splitter-vertical-nav-arrow-width: 26px !default;

// Bigger style
$bigger-splitbar-icon-gap: 20px !default;
$bigger-splitbar-icon-height: 20px !default;
$bigger-splitpane-font-size: 14px !default;
$bigger-splitbar-icon-size: 16px !default;

@include export-module('splitter-layout') {
  .e-splitter {
    &.e-splitter-horizontal,
    &.e-splitter-vertical {
      border-width: $splitbar-border-width;
      display: flex;
      overflow: hidden;
      position: relative;
      touch-action: none;
      width: 100%;

      .e-pane {
        flex: 1 1 auto;
        font-family: $splitpane-font-family;
        font-size: $splitpane-font-size;
        font-weight: $splitpane-font-weight;

        &.e-scrollable {
          overflow: auto;
        }

        &.e-static-pane {
          flex-grow: 0;
          flex-shrink: 0;
        }

        &.e-pane-horizontal {
          overflow: auto;

          &.e-pane-hidden {
            flex-basis: 0 !important; /* stylelint-disable-line declaration-no-important */
            overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
          }
        }
      }
    }

    &.e-splitter-horizontal {
      flex-direction: row;

      &.e-pane {
        &.e-scrollable {
          overflow: hidden;
        }
      }

      &.e-rtl {
        flex-direction: row-reverse;

        .e-split-bar {
          &.e-split-bar-horizontal {
            flex-direction: row-reverse;

            .e-navigate-arrow:not(.e-arrow-right)::before,
            .e-navigate-arrow:not(.e-arrow-right)::after {
              right: auto;
            }
          }
        }
      }
    }

    &.e-splitter-vertical {
      flex-direction: column;

      &.e-reverse {
        flex-direction: column-reverse;
      }

      &.e-pane {
        &.e-scrollable {
          overflow: hidden;
        }
      }

      .e-pane-vertical {
        overflow: auto;

        &.e-pane-hidden {
          flex-basis: 0 !important; /* stylelint-disable-line declaration-no-important */
          overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
        }
      }

      &.e-rtl {
        .e-split-bar {
          &.e-split-bar-vertical {
            .e-navigate-arrow:not(.e-arrow-down)::before,
            .e-navigate-arrow:not(.e-arrow-down)::after {
              right: auto;
            }

            .e-navigate-arrow {
              &:not(.e-arrow-down) {
                border-radius: $splitbar-arrow-border-radius;
                bottom: $splitter-vertical-navigate-arrow-topbottom;
                right: $splitter-vertical-navigate-arrow-left;
              }

              &.e-arrow-down {
                border-radius: $splitbar-arrow-border-radius;
                left: $splitter-vertical-navigate-arrow-left;
                right: auto;
                top: $splitter-vertical-navigate-arrow-topbottom;

                &::after {
                  right: auto;
                }
              }
            }
          }
        }
      }
    }

    .e-split-bar {
      &.e-split-bar-horizontal {
        align-items: center;
        display: flex;
        flex: 0 0 auto;
        justify-content: center;
        min-width: 1px;
        z-index: 15;

        .e-icon-hidden {
          visibility: hidden;
        }

        &.e-resizable-split-bar {
          cursor: col-resize;
        }

        &.e-resizable-split-bar::after {
          content: '';
          cursor: col-resize;
          display: block;
          height: $splitbar-resizable-height;
          position: absolute;
          width: 16px;
          z-index: 10;
        }

        .e-resize-handler {
          align-items: center;
          display: flex;
          height: $splitbar-icon-height;
          justify-content: center;
          position: relative;
          width: 1px;

          &.e-hide-handler {
            visibility: hidden;
          }
        }

        .e-navigate-arrow:not(.e-arrow-right)::before,
        .e-navigate-arrow:not(.e-arrow-right)::after {
          left: $splitter-navigate-right-arrow-left;
          right: $splitter-navigate-right-arrow-right;
        }

        .e-navigate-arrow {
          border-image: none;
          border-width: $splitbar-border-width;
          cursor: pointer;
          display: flex;
          height: $splitbar-arrow-height;
          padding: $split-bar-horizontal-navigate-arrow-padding;
          position: relative;

          &::before,
          &::after {
            border-radius: $splitbar-arrow-segment-radius;
            content: '';
            height: $splitbar-arrow-segment-height;
            position: absolute;
            transform: rotate(0deg);
            width: $splitter-navigate-arrow-width;
          }

          &::before {
            top: $splitter-navigate-arrow-top-before;
            transform-origin: $splitter-navigate-arrow-transform-origin-before;
          }

          &::after {
            top: $splitter-navigate-arrow-top-after;
            transform-origin: $splitter-navigate-arrow-transform-origin-after;
          }

          &:not(.e-arrow-right) {
            border-radius: $splitbar-arrow-border-radius;
            right: $splitter-navigate-arrow-left;
          }

          &.e-arrow-right {
            border-radius: $splitbar-arrow-border-radius;
            left: $splitter-navigate-arrow-right;
          }

          &.e-arrow-right::before,
          &.e-arrow-right::after {
            right: $splitter-horizontal-navigate-arrow-right;
          }
        }

        &.e-last-bar:not(.e-resizable-split-bar) {
          margin: $splitbar-horizontal-last-bar-margin;
        }

        &:not(.e-resizable-split-bar) {
          margin: $splitbar-horizontal-bar-margin;
        }
      }

      &.e-split-bar-vertical {
        align-items: center;
        border-left: $split-bar-border-left;
        border-right: $split-bar-border-right;
        display: flex;
        flex: 0 0 auto;
        justify-content: center;
        min-height: 1px;

        .e-icon-hidden {
          visibility: hidden;
        }

        &.e-resizable-split-bar {
          cursor: row-resize;
        }

        &.e-resizable-split-bar::after {
          content: '';
          cursor: row-resize;
          display: block;
          height: $splitbar-vertical-resizable-height;
          position: absolute;
          width: 100%;
          z-index: 12;
        }

        .e-resize-handler {
          align-items: center;
          display: flex;
          height: $splitbar-vertical-handler-height;
          justify-content: center;
          width: $splitbar-icon-gap;

          &.e-hide-handler {
            visibility: hidden;
          }
        }

        .e-navigate-arrow:not(.e-arrow-down)::before,
        .e-navigate-arrow:not(.e-arrow-down)::after {
          left: $splitter-vertical-navarrow-up-left;
        }

        .e-navigate-arrow {
          border-image: none;
          border-width: $splitter-border-none;
          cursor: pointer;
          display: flex;
          height: $splitbar-arrow-height;
          padding: $split-bar-vertical-navigate-arrow-padding;
          position: relative;
          width: $splitter-vertical-nav-arrow-width;

          &::before,
          &::after {
            border-radius: $splitbar-arrow-segment-radius;
            content: '';
            height: $splitbar-arrow-segment-height;
            position: absolute;
            transform: rotate(90deg);
            width: $splitter-navigate-arrow-width;
          }

          &:not(.e-arrow-down) {
            &::before {
              top: $splitter-vertical-navigate-arrow-up-top-before;
              transform-origin: $splitter-vertical-navigate-arrow-up-transform-origin-before;
            }
          }

          &:not(.e-arrow-down) {
            &::after {
              left: $splitter-vertical-navarrow-up-left-after;
              top: $splitter-vertical-navigate-arrow-up-top-after;
              transform-origin: $splitter-vertical-navigate-arrow-up-transform-origin-after;
            }
          }

          &.e-arrow-down {
            &::before {
              left: $splitter-vertical-navigate-arrow-down-left-before;
              top: $splitter-vertical-navigate-arrow-down-top-before;
              transform-origin: $splitter-vertical-navarrow-transform-origin-before;
            }
          }

          &.e-arrow-down {
            &::after {
              left: $splitter-vertical-navigate-arrow-down-left-after;
              top: $splitter-vertical-navigate-arrow-down-top-after;
              transform-origin: $splitter-vertical-navarrow-transform-origin-after;
            }
          }

          &:not(.e-arrow-down) {
            border-radius: $splitbar-arrow-border-radius;
            bottom: $splitter-vertical-navigate-arrow-topbottom;
            left: $splitter-vertical-navigate-arrow-left;
          }

          &.e-arrow-down {
            border-radius: $splitbar-arrow-border-radius;
            right: $splitter-vertical-navigate-arrow-left;
            top: $splitter-vertical-navigate-arrow-topbottom;
          }

          &.e-arrow-down::before,
          &.e-arrow-down::after {
            right: 10px;
          }
        }

        &.e-last-bar:not(.e-resizable-split-bar) {
          margin: $splitbar-vertical-last-bar-margin;
        }

        &:not(.e-resizable-split-bar) {
          margin: $splitbar-vertical-bar-margin;
        }
      }
      .e-navigate-arrow {
        border-style: solid;
      }
    }
  }

  .e-rtl .e-splitter {
    &.e-splitter-horizontal {
      flex-direction: row-reverse;
    }
  }

  .e-content-placeholder.e-splitter.e-placeholder-splitter {
    background-size: 100px 110px;
    min-height: 110px;
  }

  .e-splitter.e-ie .e-navigate-arrow.e-arrow-left {
    margin-left: $split-bar-horizontal-navigate-arrow-left-margin-left;
  }

  .e-splitter.e-ie .e-split-bar-horizontal .e-resize-handler {
    flex-direction: column;
  }
}

/* stylelint-disable-line no-empty-source */

@include export-module('splitter-theme') {
  .e-splitter {
    &.e-splitter-horizontal,
    &.e-splitter-vertical {
      border: solid $splitbar-border-width $splitter-border-color;

      .e-pane {
        color: $splitpane-font-color;

        // sass-lint:disable nesting-depth
        &.e-splitter {

          &.e-splitter-horizontal,
          &.e-splitter-vertical {
            border: transparent;
          }
        }
      }
    }

    .e-split-bar {
      &.e-split-bar-horizontal {
        background: $splitbar-border-color;
        border-left: $split-bar-border-left;
        border-right: $split-bar-border-right;

        .e-resize-handler {
          background: $resize-icon-bg-color;
          color: $splitbar-icon-color;
          z-index: 10;
        }

        .e-navigate-arrow:not(.e-icon-hidden) {
          background-color: transparent;
          border-color: transparent;
          color: transparent;
          transition: background-color 500ms ease-out;

          &::before,
          &::after {
            background-color: $navigation-icon-background-hover;
            opacity: 0;
            transition-duration: .3s;
            transition-timing-function: cubic-bezier(.25, .1, .25, 1);
          }
        }

        &.e-split-bar-hover,
        &.e-split-bar-active {
          background: $splitbar-hover-border-color;
          border-left: $split-bar-hover-border-left;
          border-right: $split-bar-hover-border-right;

          .e-resize-handler {
            background: $resize-icon-bg-color;
            color: $splitbar-hover-border-color;
          }

          .e-navigate-arrow {
            &.e-arrow-left,
            &.e-arrow-right {
              background-color: $navigation-arrow-background;
              border-color: $navigation-icon-border-hover;
              border-width: $splitbar-border-width;
              opacity: .9;
            }
          }

          &.e-split-bar-hover,
          &.e-split-bar-active {
            .e-navigate-arrow::before {
              background-color: $navigation-icon-background-hover;
              opacity: 1;
              transform: rotate(40deg);
            }

            .e-navigate-arrow::after {
              background-color: $navigation-icon-background-hover;
              opacity: 1;
              transform: rotate(-40deg);
            }
          }
        }

        &.e-split-bar-hover,
        &.e-split-bar-active {
          .e-navigate-arrow.e-arrow-right::before {
            background-color: $navigation-icon-background-hover;
            opacity: 1;
            transform: rotate(-40deg);
          }

          .e-navigate-arrow.e-arrow-right::after {
            background-color: $navigation-icon-background-hover;
            opacity: 1;
            transform: rotate(40deg);
          }
        }

        &.e-split-bar-active {
          background: $splitbar-hover-border-color;

          .e-resize-handler {
            background: $resize-icon-bg-color;
            color: $splitbar-hover-border-color;
          }
        }
      }

      &.e-split-bar-vertical {
        background: $splitbar-border-color;

        .e-resize-handler {
          background: $resize-icon-bg-color;
          color: $splitbar-icon-color;
          z-index: 12;
        }

        &.e-split-bar-hover,
        &.e-split-bar-active {
          background: $splitbar-hover-border-color;
          border-left: $split-bar-hover-border-left;
          border-right: $split-bar-hover-border-right;

          .e-navigate-arrow {
            &.e-arrow-up,
            &.e-arrow-down {
              background-color: $navigation-arrow-background;
              border-color: $navigation-icon-border-hover;
              border-width: $splitbar-border-width;
              opacity: .9;
            }
          }

          .e-resize-handler {
            background: $resize-icon-bg-color;
            color: $splitbar-hover-border-color;
          }
        }

        &.e-split-bar-hover,
        &.e-split-bar-active {
          .e-navigate-arrow.e-arrow-up {
            &::before {
              background-color: $navigation-icon-background-hover;
              opacity: 1;
              transform: rotate(125deg);
            }

            &::after {
              background-color: $navigation-icon-background-hover;
              opacity: 1;
              transform: rotate(50deg);
            }
          }

          .e-navigate-arrow.e-arrow-down {
            &::before {
              background-color: $navigation-icon-background-hover;
              opacity: 1;
              transform: rotate(55deg);
            }

            &::after {
              background-color: $navigation-icon-background-hover;
              opacity: 1;
              transform: rotate(125deg);
            }
          }
        }

        .e-navigate-arrow {
          background-color: transparent;
          border-color: transparent;
          color: transparent;
          transition: background-color 300ms ease-out;

          &::before,
          &::after {
            background-color: $navigation-icon-background-hover;
            opacity: 0;
            transition-duration: .3s;
            transition-timing-function: cubic-bezier(.25, .1, .25, 1);
          }
        }

        &.e-split-bar-active {
          background: $splitbar-hover-border-color;

          .e-resize-handler {
            background: $resize-icon-bg-color;
            color: $splitbar-hover-border-color;
          }
        }
      }
    }

    &.e-disabled {
      opacity: .4;
      pointer-events: none;
    }
  }
}

@include export-module('splitter-bootstrap4-icons') {
  .e-splitter {
    .e-split-bar {
      &.e-split-bar-horizontal {
        .e-resize-handler::before {
          content: '\e781';
          font-family: 'e-icons';
          font-size: $splitbar-icon-size;
        }

        .e-resize-handler {
          &.e-template-resize-handler::before {
            content: '';
          }
        }
      }

      &.e-split-bar-vertical {
        & .e-resize-handler::before {
          content: '\e71b';
          font-family: 'e-icons';
          font-size: $splitbar-icon-size;
        }

        .e-resize-handler {
          &.e-template-resize-handler::before {
            content: '';
          }
        }
      }
    }
  }
}