/* stylelint-disable no-descending-specificity */
// Width variables (appears count calculates by raw css)
$width0: 100%; // Appears 3 times
$width1: 20px; // Appears 2 times
$width2: 100px; // Appears 1 time
$width3: 14px; // Appears 1 time
$width4: 18px; // Appears 1 time
$width5: 15px; // Appears 1 time
$width6: 2px; // Appears 1 time

// Height variables (appears count calculates by raw css)
$height0: 100%; // Appears 4 times
$height1: 20px; // Appears 2 times
$height2: 14px; // Appears 2 times
$height3: 10px; // Appears 1 time
$height4: 19px; // Appears 1 time
$height5: 18px; // Appears 1 time
$height6: 15px; // Appears 1 time

.lm_root {
  position: relative;
}

.lm_row > .lm_item {
  float: left;
}

// Single Pane content (area in which final dragged content is contained)
.lm_content {
  overflow: hidden;
  position: relative;
  outline: 0;
}

// ".lm_dragging" is applied to BODY tag during Drag and is also directly applied to the root of the object being dragged
.lm_dragging,
.lm_dragging * {
  cursor: grabbing !important;
  user-select: none;
}

// If a specific Pane is maximized
.lm_maximised {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 40;
}

.lm_maximise_placeholder {
  display: none;
}

// Separator line (handle to change pane size)
.lm_splitter {
  position: relative;
  z-index: 20;

  &:hover, // When hovered by mouse...
  &.lm_dragging {
    background: orange;
  }

  &.lm_vertical {
    .lm_drag_handle {
      width: $width0;
      position: absolute;
      cursor: ns-resize;
    }
  }

  &.lm_horizontal {
    float: left;
    height: $height0;

    .lm_drag_handle {
      height: $height0;
      position: absolute;
      cursor: ew-resize;
    }
  }
}

// Pane Header (container of Tabs for each pane)
.lm_header {
  display: flex;
  justify-content: space-between;
  max-width: 100%;
  z-index: 12; //above lm_content, below lm_splitter
  position: relative;
  overflow: hidden;

  &.lm_dropdown_open {
    // This is an ugly hack, z-index of the whole header needs to be moved up
    // when the menu is open, because its positioned relative to header.
    // The header has a position, which creates a stacking context
    // that can result in the next header being "above" the dropdown.
    // The same problem happens for splitters too.
    // A better solution would refactor the dropdown to be a root node,
    // and in general use z-index way less.
    z-index: 22; //above other lm_headers and lm_splitter
  }

  [class^='lm_'] {
    box-sizing: content-box !important;
  }

  // Pane controls (popout, maximize, minimize, close)
  .lm_controls {
    display: flex;
    user-select: none;

    > li {
      cursor: pointer;
      float: left;
      width: $width4;
      height: $height5;
      text-align: center;
    }

    > li[disabled] {
      cursor: default;
      opacity: 0.1;
    }
  }

  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }

  .lm_tabs {
    display: flex;
    flex-grow: 1;
    overflow: hidden;
  }

  // Single Tab container. A single Tab is set for each pane, a group of Tabs are contained in ".lm_header"
  .lm_tab {
    cursor: pointer;
    height: $height2;
    margin-top: 1px;
    padding: 0 10px 5px;
    padding-right: 25px;
    position: relative;
    min-width: 0;
    flex-shrink: 0;

    .lm_title {
      display: inline-block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }

    // Close Tab Icon
    .lm_close_tab {
      width: $width3;
      height: $height2;
      position: absolute;
      top: 0;
      right: 0;
      text-align: center;
    }
  }
}

// Headers positions
.lm_stack.lm_left,
.lm_stack.lm_right {
  .lm_header {
    height: 100%;
  }
}

.lm_dragProxy.lm_left,
.lm_dragProxy.lm_right,
.lm_stack.lm_left,
.lm_stack.lm_right {
  .lm_header {
    width: 20px;
    float: left;
    vertical-align: top;
    .lm_tabs {
      transform-origin: left top;
      top: 0;
      width: 1000px; /* hack */
    }
    .lm_controls {
      bottom: 0;
    }
  }
  .lm_items {
    float: left;
  }
}

.lm_dragProxy.lm_left,
.lm_stack.lm_left {
  .lm_header {
    .lm_tabs {
      transform: rotate(-90deg) scaleX(-1);
      left: 0;
      .lm_tab {
        transform: scaleX(-1);
        margin-top: 1px;
      }
    }
    .lm_tabdropdown_list {
      top: initial;
      right: initial;
      left: 20px;
    }
  }
}

.lm_dragProxy.lm_right .lm_content {
  float: left;
}

.lm_dragProxy.lm_right,
.lm_stack.lm_right {
  .lm_header {
    .lm_tabs {
      transform: rotate(90deg) scaleX(1);
      left: 100%;
      margin-left: 0;
    }
    .lm_controls {
      left: 3px;
    }
    .lm_tabdropdown_list {
      top: initial;
      right: 20px;
    }
  }
}

.lm_dragProxy.lm_bottom,
.lm_stack.lm_bottom {
  .lm_header {
    .lm_tab {
      margin-top: 0;
      border-top: none;
    }
    .lm_controls {
      top: 3px;
    }
    .lm_tabdropdown_list {
      top: initial;
      bottom: 20px;
    }
  }
}

.lm_drop_tab_placeholder {
  flex-shrink: 0;
}

// Dropdown arrow for additional tabs when too many to be displayed
.lm_tabdropdown_list {
  position: absolute;
  overflow-y: auto;
  overflow-x: hidden;
  top: 0;
  left: 0;
  max-height: 100%;

  .lm_tabs {
    flex-direction: column;
  }

  .lm_tab {
    padding-right: 10px;

    .lm_title {
      display: inline-block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }
  }

  .lm_close_tab {
    display: none !important;
  }
}

/***********************************
* Drag Proxy
***********************************/

// Single Pane content during Drag (style of moving window following mouse)
.lm_dragProxy {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 30;
  pointer-events: none;

  .lm_header {
    background: transparent;
  }

  .lm_content {
    border-top: none;
    overflow: hidden;
  }
}

// Placeholder Container of target position
.lm_dropTargetIndicator {
  display: none;
  position: absolute;
  z-index: 20;
  pointer-events: none;

  // Inner Placeholder
  .lm_inner {
    width: $width0;
    height: $height0;
    position: relative;
    top: 0;
    left: 0;
  }
}

// If a specific Pane is Popped Out, so move it to a different Browser Window, Icon to restore original position is:
.lm_popin {
  width: $width1;
  height: $height1;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 9999;

  > * {
    width: $width0;
    height: $height0;
    position: absolute;
    top: 0;
    left: 0;
  }

  > .lm_bg {
    z-index: 10;
  }

  > .lm_icon {
    z-index: 20;
  }
}