// Color variables (appears count calculates by raw css)
$color0: #070707; // Appears 7 times
$color1: #222222; // Appears 3 times
$color2: #eeeeee; // Appears 2 times
$color3: #dddddd; // Appears 2 times

$color4: #cccccc; // Appears 1 time
$color5: #444444; // Appears 1 time
$color6: #999999; // Appears 1 time
$color7: #111111; // Appears 1 time
$color8: #151515; // Appears 1 time
$color9: #555555; // Appears 1 time
$color10: #ffffff; // Appears 2 time

// ".lm_dragging" is applied to BODY tag during Drag and is also directly applied to the root of the object being dragged

// Entire GoldenLayout Container, if a background is set, it is visible as color of "pane header" and "splitters" (if these latest has opacity very low)
.lm_goldenlayout {
  background: $color0;
}

// Single Pane content (area in which final dragged content is contained)
.lm_content {
  background: $color1;
  border: 1px solid transparent;
}

// Single Pane content during Drag (style of moving window following mouse)
.lm_dragProxy {
  .lm_content {
    box-shadow: 2px 2px 4px fade($color0,90%);
  }
}

// Placeholder Container of target position
.lm_dropTargetIndicator {
  box-shadow: inset 0 0 30px $color0;
  outline: 1px dashed $color4;

  // Inner Placeholder
  .lm_inner {
    background: $color0;
    opacity: 0.2;
  }
}

// Separator line (handle to change pane size)
.lm_splitter {
  background: $color0;
  opacity: 0.001;
  transition: opacity 200ms ease;

  &:hover, // When hovered by mouse...
  &.lm_dragging {
    background: $color5;
    opacity: 1;
  }
}

// Pane Header (container of Tabs for each pane)
.lm_header {
  height: 20px;
  transition: ease-in 0.2s background-color;

  // Single Tab container. A single Tab is set for each pane, a group of Tabs are contained in ".lm_header"
  .lm_tab {
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: $color6;
    background: $color7;
    box-shadow: 2px -2px 2px fade($color0,30%);
    margin-right: 2px;
    padding-bottom: 2px;
    padding-top: 2px;

    /*.lm_title         // Present in LIGHT Theme
    {
      padding-top:1px;
    }*/

    // Close Tab Icon
    .lm_close_tab {
      width: 11px;
      height: 11px;
      // background-image: data-uri('../../img/lm_close_white.png');
      // background-position: center center;
      // background-repeat: no-repeat;
      // top: 4px;
      right: 6px;
      opacity: 0.4;
      color: #888;
      transition: ease-in 0.2s color;

      &:hover {
        color: #eee;
        opacity: 1;
      }

      &::after {
        font-size: 12px;
        content: "\F05AD";
      }
    }

    // If Tab is active, so if it's in foreground
    &.lm_active {
      border-bottom: none;
      box-shadow: 0 -2px 2px $color0;
      padding-bottom: 3px;

      .lm_close_tab {
        opacity: 1;
      }
    }
  }
}

.lm_dragProxy,
.lm_stack {
  &.lm_right {
    .lm_header .lm_tab {
      &.lm_active {
        box-shadow: 2px -2px 2px $color0;
      }
    }
  }

  &.lm_bottom {
    .lm_header .lm_tab {
      box-shadow: 2px 2px 2px fade($color0,30%);

      &.lm_active {
        box-shadow: 0 2px 2px $color0;
      }
    }
  }
}

// If Pane Header (container of Tabs for each pane) is selected (used only if addition of new Contents is made "by selection" and not "by drag")
.lm_selected {
  .lm_header {
    background-color: $color8;
  }
}

.lm_tab {
  &:hover, // If Tab is hovered
  &.lm_active // If Tab is active, so if it's in foreground
  {
    background: $color1;
    color: $color3;
  }
}

// Dropdown arrow for additional tabs when too many to be displayed
.lm_header .lm_controls .lm_tabdropdown:before {
  color: $color10;
}

.lm_controls, .lm_close_tab {
  font: normal normal normal 18px/1 "Material Design Icons";
}

// Pane controls (popout, maximize, minimize, close)
.lm_controls {

  // All Pane controls shares these
  > li {
    position: relative;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.4;
    transition: opacity 300ms ease;

    &:hover {
      opacity: 1;
    }
  }

  // Icon to PopOut Pane, so move it to a different Browser Window
  .lm_popout {
    background-image: data-uri('../../img/lm_popout_white.png');
  }

  // Icon to Maximize Pane, so it will fill the entire GoldenLayout Container
  .lm_maximise {
    // background-image: data-uri('../../img/lm_maximise_white.png');

    &::before {
      content: "\F05AF";
    }
  }

  // Icon to Close Pane and so remove it from GoldenLayout Container
  .lm_close {
    // background-image: data-uri('../../img/lm_close_white.png');

    &::before {
      content: "\F05AD";
    }
  }

  // Icon to toggle Pane Docking at mouse hover
  .lm_dock {
    // background-image: data-uri('../../img/lm_docked_white.png');
    &::before {
      content: "\F0403";
    }
    transform:rotate(-45deg);
    transition:transform 300ms;
  }
}

.lm_stack.lm_docked {
  .lm_controls .lm_dock {
    transform:rotate(0deg);
  }

  > .lm_items {
    border-color: $color9;
    border-image: linear-gradient(to right, $color5 1%, $color6 100%);
    box-shadow: 0 2px 2px $color0;
  }
}

// If a specific Pane is maximized
.lm_maximised {
  // Pane Header (container of Tabs for each pane) can have different style when is Maximized
  .lm_header {
    background-color: $color0;
  }

  // Pane controls are different in Maximized Mode, especially the old Icon "Maximise" that now has a different meaning, so "Minimize" (even if CSS Class did not change)
  .lm_controls {
    .lm_maximise {
      // background-image: data-uri('../../img/lm_minimize_white.png');
      &::before {
        content: "\F05B2";
      }
    }
  }
}

.lm_transition_indicator {
  background-color: $color0;
  border: 1px dashed $color9;
}

// If a specific Pane is Popped Out, so move it to a different Browser Window, Icon to restore original position is:
.lm_popin {
  cursor: pointer;

  // Background of Icon
  .lm_bg {
    background: $color10;
    opacity: 0.3;
  }

  // Icon to Restore original position in Golden Layout Container
  .lm_icon {
    background-image: data-uri('../../img/lm_popin_white.png');
    background-position: center center;
    background-repeat: no-repeat;
    border-left: 1px solid $color2;
    border-top: 1px solid $color2;
    opacity: 0.7;
  }

  &:hover {
    .lm_icon {
      opacity: 1;
    }
  }
}