@import '../../base/tailwind3-dark-lite.scss';
//Layout Variables Start
$splitpane-font-size: $text-sm !default;
$splitpane-font-weight: $font-weight-normal !default;
$splitpane-font-family: $font-family !default;
$splitbar-icon-size: 14px !default;
$splitbar-icon-gap: 18px !default;
$bigger-splitbar-icon-gap: 20px !default;
$bigger-splitpane-font-size: $text-base !default;
$bigger-splitbar-icon-size: 16px !default;

//Layout Variables End

//Theme Variables Start
$navigation-arrow-background: $transparent !default;
$navigation-icon-background-hover: $primary !default;
$navigation-icon-border-hover: $primary !default;
$splitter-border-color: $border-light !default;
$splitter-background-color: $primary-text-color !default;
$splitpane-font-color: $content-text-color !default;
$splitbar-border-color: $border-light !default;
$splitbar-hover-border-color: $primary !default;
$resize-icon-hover-color: $splitbar-hover-border-color !default;
$splitbar-icon-color: $icon-color !default;
$collapse-icon-bg-color: $primary-text-color !default;
$resize-icon-bg-color: $content-bg-color !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;

//Theme Variables End

@include export-module('splitter-layout') {
  .e-splitter {
    &.e-splitter-horizontal,
    &.e-splitter-vertical {
      border-width: 1px;
      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-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: 50%;
                bottom: 20px;
                right: 22px;
              }

              &.e-arrow-down {
                border-radius: 50%;
                left: 22px;
                right: auto;
                top: 20px;

                &::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: 100%;
          position: absolute;
          width: 16px;
          z-index: 10;
        }

        .e-resize-handler {
          align-items: center;
          display: flex;
          height: $splitbar-icon-gap;
          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: 8px;
          right: 3px;
        }

        .e-navigate-arrow {
          border-image: none;
          border-width: 1px;
          cursor: pointer;
          display: flex;
          height: 26px;
          padding: 1px 12px;
          position: relative;

          &::before,
          &::after {
            border-radius: 16px;
            content: '';
            height: 8px;
            position: absolute;
            transform: rotate(0deg);
            width: 2px;
          }

          &::before {
            top: 5px;
            transform-origin: 1px 7px 0;
          }

          &::after {
            top: 11px;
            transform-origin: 1px 1px 0;
          }

          &:not(.e-arrow-right) {
            border-radius: 50%;
            right: 5px;
          }

          &.e-arrow-right {
            border-radius: 50%;
            left: 5px;
          }

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

        &.e-last-bar:not(.e-resizable-split-bar) {
          margin: 0 3px;
        }

        &:not(.e-resizable-split-bar) {
          margin: 0 0 0 3px;
        }
      }

      &.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: 16px;
          position: absolute;
          width: 100%;
          z-index: 12;
        }

        .e-resize-handler {
          align-items: center;
          display: flex;
          height: 1px;
          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: 10px;
        }

        .e-navigate-arrow {
          border-image: none;
          border-width: 0;
          cursor: pointer;
          display: flex;
          height: 26px;
          padding: 10px 3px 10px 18px;
          position: relative;
          width: 26px;

          &::before,
          &::after {
            border-radius: 16px;
            content: '';
            height: 8px;
            position: absolute;
            transform: rotate(90deg);
            width: 2px;
          }

          &:not(.e-arrow-down) {
            &::before {
              top: 3px;
              transform-origin: 2px 7px 0;
            }
          }

          &:not(.e-arrow-down) {
            &::after {
              left: 11px;
              top: 8px;
              transform-origin: 1px 1px 0;
            }
          }

          &.e-arrow-down {
            &::before {
              left: 12px;
              top: 8px;
              transform-origin: 1px 6px 0;
            }
          }

          &.e-arrow-down {
            &::after {
              left: 10px;
              top: 12px;
              transform-origin: 1px 2px 0;
            }
          }

          &:not(.e-arrow-down) {
            border-radius: 50%;
            bottom: 20px;
            left: 22px;
          }

          &.e-arrow-down {
            border-radius: 50%;
            right: 22px;
            top: 20px;
          }

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

        &.e-last-bar:not(.e-resizable-split-bar) {
          margin: 3px 0;
        }

        &:not(.e-resizable-split-bar) {
          margin: 3px 0 0;
        }
      }
    }
  }

  .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: -26px;
  }

  .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 1px $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: 1px;
              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: 1px;
              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-material-icons') {
  .e-splitter {
    .e-split-bar {
      &.e-split-bar-horizontal {
        .e-resize-handler::before {
          content: '\e7e3';
          font-family: 'e-icons';
          font-size: $splitbar-icon-size;
        }
      }

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