/* stylelint-disable no-descending-specificity */
@import '@deephaven/components/scss/custom.scss';

$tab-height: 28px;
$tab-padding-x: 6px;
$drag-border-width: 5px;

$tab-font-size: 12px;

$lm-tab-color: $gray-400;
$lm-tab-hover-color: $gray-300;
$lm-tab-active-color: var(--dh-color-text);
$lm-tab-icon-color: $gray-200;

//make some subtle tab background colors relative to our defined color
$lm-tab-active-background: var(--dh-color-golden-layout-tab-selected-bg);
$lm-tab-background: var(--dh-color-golden-layout-tab-bg);
$lm-header-background: var(--dh-color-golden-layout-tab-header-bg);

$lm-splitter-hover-color: $gray-400;
$lm-splitter-active-color: $gray-300;

// ".lm_dragging" is applied to BODY tag during Drag and is also directly applied to the root of the object being dragged
//is added to the body class, prevents overflow in our app context
.lm_dragging {
  overflow: hidden;
  pointer-events: none;

  // we still need events on our header for scroll while dragging to work
  .lm_goldenlayout .lm_header {
    pointer-events: auto;

    // disable other control buttons during drag
    .lm_controls > li {
      pointer-events: none;

      &.lm_tabpreviousbutton,
      &.lm_tabnextbutton {
        pointer-events: auto;
      }
    }
  }
}

// disable hover styling during drag (pointer-events still needed)
body:not(.lm_dragging) .lm_header .lm_tab:not(.lm_active):hover {
  color: $lm-tab-hover-color;
}

body:not(.lm_dragging) .lm_header .lm_tab:hover .lm_close_tab {
  opacity: 0.35;

  &:hover {
    opacity: 1;

    &::before {
      opacity: 1;
    }
  }
}

// give visual indication of the bounds of a nested golden-layout while dragging
.lm_goldenlayout .lm_goldenlayout.lm_dragging {
  &::after {
    content: '';
    position: absolute;
    inset: 1px;
    background: var(--dh-color-highlight-selected);
    border: 1px dashed var(--dh-color-hover-border);
    pointer-events: none;
    z-index: 9999;
  }
}

// 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: $background;
  position: absolute;
}

// Single Pane content (area in which final dragged content is contained)
.lm_content {
  background: $content-bg;
  overflow: visible;
}

// Single Pane content during Drag (style of moving window following mouse)
.lm_dragProxy {
  .lm_content {
    height: 100%;
    width: 100%;
    box-shadow: $box-shadow;
  }
  .lm_header {
    height: $tab-height;
    box-shadow: none;

    .lm_tab,
    .lm_tab.lm_active {
      border: 0;
      box-shadow: $box-shadow;
    }
  }
}

// Placeholder Container of target position
.lm_dropTargetIndicator {
  @include ants-base($white, $black); //replace with ants

  box-sizing: border-box;
  transition: all $transition-mid ease;

  // Inner Placeholder
  .lm_inner {
    box-sizing: border-box;
    border: $ant-thickness solid transparent; //offset shadow using a transparent border
    box-shadow: inset 0 0 1rem 1px var(--dh-color-dropshadow);
    opacity: 1; //set opacity back to 1, default 0.2 and backroudn was solid.
    background: accent-opacity(10);
  }
}

// Separator line (handle to change pane size)
.lm_splitter {
  background: $lm-splitter-hover-color;
  opacity: 0.001;
  transition: opacity $transition ease;

  &:hover, // When hovered by mouse...
  &.lm_dragging {
    background: $lm-splitter-active-color;
    opacity: 1;
  }
}

// Pane Header (container of Tabs for each pane)
.lm_header {
  box-sizing: content-box; // golden-layout sets a js height using a content box model
  height: $tab-height;
  padding-top: 0;
  background: $lm-header-background;
  box-shadow: inset 0 -1px 0 0 $background;
  // inset box shadows with 0-blur used to draw borders without impacting spacing or GL size calculations.
  // golden layout default styling doesnt have the same border styling we want
  // this trick is used elsewhere in the header as well for the same purpose
  user-select: none;

  .lm_controls {
    > li {
      height: 100%;
      width: 24px;
    }
  }

  &.lm_selectable {
    cursor: pointer;
  }
}

.lm_header,
.lm_tabdropdown_list {
  // Single Tab container. A single Tab is set for each pane, a group of Tabs are contained in ".lm_header"
  .lm_tab {
    display: flex;
    align-items: center;
    font-family: $font-family-sans-serif;
    background-color: $lm-tab-background;
    color: $lm-tab-color;
    height: $tab-height;
    font-size: $tab-font-size;
    min-width: 10ch;
    margin: 0;
    padding: 0 0 0 $tab-padding-x;
    box-shadow: inset -1px -1px 0 0 $background; // acting as bottom and right border
    transition:
      color $transition,
      background-color $transition;
    max-width: 12.25rem;
    white-space: nowrap;
    overflow: hidden;

    .lm_title {
      flex-grow: 1;
      padding-right: $tab-padding-x;
      // add equalized spacing for tabs without close buttons
      // so that when a tab is longer then min-width it still
      // is balanced with equal padding. Extra padding is then
      // removed from tabs with close buttons via negative margin
    }

    .lm_title_before {
      display: flex;
      align-items: center;
    }

    // Close Tab Icon
    .lm_close_tab {
      $close-button-size: 8px;

      margin-left: -$tab-padding-x;
      flex-shrink: 0;
      cursor: pointer;
      position: relative;
      width: 18px;
      height: 100%;
      opacity: 0;
      // intentionally no transition on close icon
      // we want the button to appear instantly

      &::before {
        // used for hover background
        // which is a different shape then the hit area
        content: '';
        position: absolute;
        inset: 3px 3px 3px 1px; // looks better offset
        border-radius: 2px;
        background-color: var(--dh-color-highlight-selected-hover);
        opacity: 0;
        transition: opacity $transition ease;
      }

      &::after {
        // since this is a mask, we need to isolate it
        // so it doesn't mask our hover background
        @include icon-image-mask(
          var(--dh-svg-icon-close-tab),
          $close-button-size
        );

        content: '';
        position: absolute;
        inset: 0 2px 0 0; // looks better offset
      }
    }
  }
}

// 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: $lm-tab-active-background;
  }
}

.lm_header .lm_tab.lm_active,
.lm_header .lm_tab.lm_active:hover {
  height: $tab-height;
  background-color: $lm-tab-active-background;
  color: $lm-tab-active-color;
  padding-bottom: 0;
  box-shadow: inset -1px 0 0 0 $background; // act as right border only when active
  // also kills the default shadow, doesn't work well with our design
  &.lm_focusin {
    box-shadow:
      inset 0 1px $primary,
      inset -1px 0 0 0 $background; // top focus indicator, right border
  }

  .lm_close_tab {
    // show close button on active tab
    opacity: 0.35;
  }
}

.lm_window_blur {
  .lm_header .lm_tab.lm_active.lm_focusin {
    box-shadow: inset -1px 0 0 0 $background;
  }
}

// Pane controls (popout, maximize, minimize, close)
.lm_controls {
  // All Pane controls shares these
  > li {
    opacity: 0.4;
    transition: opacity $transition ease;

    &:hover {
      opacity: 1;
    }

    position: relative;
    background-position: center center;
    background-repeat: no-repeat;
  }

  // Icon to PopOut Pane, so move it to a different Browser Window
  .lm_popout {
    // Leaving this inline since it is a PNG. We should convert it to a 16px
    // SVG like other icons and move to a css variable so it can be overridden.
    @include icon-image-mask(
      url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAPklEQVR4nI2Q0QoAIAwCNfr/X7aXCpGN8snBdgejJOzckpkxs9jR6K6T5JpU0nWl5pSXTk7qwh8SnNT+CAAWCgkKFpuSWsUAAAAASUVORK5CYII='),
      auto
    );
  }

  // Icon to Maximize Pane, so it will fill the entire GoldenLayout Container
  .lm_maximise {
    @include icon-image-mask(var(--dh-svg-icon-maximise));
  }

  .lm_tabdropdown {
    @include icon-image-mask(var(--dh-svg-icon-tab-dropdown));
  }

  // Icon to Close Pane and so remove it from GoldenLayout Container
  .lm_close {
    @include icon-image-mask(var(--dh-svg-icon-close));
  }

  .lm_tabnextbutton {
    @include icon-image-mask(var(--dh-svg-icon-next));
  }

  .lm_tabpreviousbutton {
    @include icon-image-mask(var(--dh-svg-icon-prev));
  }
}

.lm_tabdropdown_list {
  z-index: $zindex-dropdown;
  background: var(--dh-color-popover-bg);
  box-shadow: $box-shadow;
  border-radius: $border-radius;
  max-width: 12rem;
  margin: 0;
  padding: 0;
  list-style-type: none;

  .lm_tabdropdown_search {
    padding: $spacer-1;
    input {
      padding: $input-padding-y $input-padding-x;
      line-height: $input-line-height;
      color: $input-color;
      background-color: $input-bg;
      border: $input-border-width solid $input-border-color;
      border-radius: $border-radius;
      max-width: 100%;

      &::placeholder {
        color: $input-placeholder-color;
        opacity: 1;
      }

      &:focus {
        border-color: $input-focus-border-color;
        box-shadow: $input-btn-focus-box-shadow;
        outline: 0;
      }
    }
  }

  .lm_tabs {
    padding: 0;
  }

  .lm_tab {
    background: transparent;
    color: $lm-tab-hover-color;
    box-shadow: none;

    &.lm_keyboard_active {
      color: $lm-tab-hover-color;
      background-color: var(--dh-color-highlight-selected);

      &:hover {
        background-color: var(--dh-color-highlight-selected-hover);
      }
    }

    &:hover {
      color: $lm-tab-active-color;
      background-color: var(--dh-color-highlight-hover);
    }
  }
}

// If a specific Pane is maximized
.lm_maximised {
  border: 15px solid bg-opacity(80);
  height: 100% !important;
  width: 100% !important;
  .lm_items {
    box-shadow: $box-shadow;
  }

  // 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 {
      @include icon-image-mask(var(--dh-svg-icon-minimise));
    }
  }
}

.lm_tabs:empty + .lm_controls .lm_maximise {
  display: none;
}