@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;
  }
}