@import '@opensumi/ide-components/lib/style/mixins.less';
@import '@opensumi/ide-core-browser/lib/style/variable.less';

.kt_workbench_editor {
  height: 100%;
  background-color: var(--editor-background);
  display: flex;
  border-top: 1px solid var(--tab-border);

  .kt_editor_multi_diff_editor {
    height: 100%;
    width: 100%;
    position: relative;
  }
}
.kt_editor_main_wrapper {
  flex-grow: 1;
  max-width: 100%;
}

.kt_editor_right_widget {
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.kt_editor_components {
  height: 0;
  flex-grow: 1;
}

.kt_editor_component {
  height: 100%;
  > div {
    height: 100%;
  }
}
.kt_editor_code_editor {
  > div {
    height: 100%;
  }
}
.kt_editor_group {
  height: 100%;
  outline: none;
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: var(--editorGroup-emptyBackground);

  .kt_editor_background {
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  .kt_editor_tabs {
    display: flex;
    .editor_actions_no_actions {
      padding: 0 !important;
    }
    .editor_actions {
      flex-shrink: 0;
      height: 100%;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 5px 0 10px;
      position: relative;
      background: var(--editorGroupHeader-tabsBackground);
      &::before {
        content: '';
        height: 1px;
        background: var(--tab-border);
        top: -1px;
        width: 100%;
        left: 0;
        position: absolute;
        display: block;
        z-index: var(--stacking-level-background, 0);
      }
      &::after {
        content: '';
        height: 1px;
        background: var(--tab-border);
        bottom: 0;
        width: 100%;
        left: 0;
        position: absolute;
        display: block;
        z-index: var(--stacking-level-background, 0);
      }
      .editor_action_wrapper {
        margin-left: 8px;
        position: relative;
        .editor_action {
          width: 14px;
          height: 14px;
          line-height: 14px;
          font-size: 14px;
          cursor: pointer;
        }
        &:hover {
          > .editor-action {
            transform: scale(1.1);
          }
        }
        &:global {
          &.mask-mode {
            background: var(--foreground);
            height: 14px;
            width: 14px;
          }
        }
      }
    }
  }

  .kt_editor_tabs_scroll_wrapper {
    flex: 1;
    overflow: hidden;
    width: 100%;
    position: relative;
    background-color: var(--editorGroupHeader-tabsBackground);
    &::after {
      position: absolute;
      content: '';
      height: 1px;
      width: 100%;
      bottom: 0;
      left: 0;
      z-index: 10;
      background-color: var(--tab-border);
    }
    &.kt_on_drag_over {
      background-color: var(--editorGroup-dropBackground);
    }
  }

  .kt_editor_tabs_scroll {
    overflow-y: hidden;
    :global(.loading_indicator) {
      width: 16px;
      height: 22px;
    }
  }
  .kt_editor_tab_preview {
    font-style: italic;
    :global(.file-icon) {
      font-style: normal;
    }
  }

  .kt_editor_wrap_mode_action {
    position: absolute;
    right: 0;
    bottom: 0;
  }

  .kt_editor_tabs_content_empty {
    display: flex !important;
  }

  .kt_editor_wrap_container {
    display: flex;
    flex-direction: column;

    .kt_editor_tabs_content {
      flex-wrap: wrap;
      width: 100%;
      background: var(--editorGroupHeader-tabsBackground);
      &.kt_editor_tabs_current_last {
        display: flex;
      }
      &::before {
        content: '';
        height: 1px;
        background: var(--tab-border);
        bottom: 0;
        width: 100%;
        left: 0;
        position: absolute;
        display: block;
        z-index: var(--stacking-level-background, 0);
      }
    }
  }
  .last_in_row {
    flex-grow: 1;
  }
  .kt_editor_tabs_content {
    overflow-y: hidden;
    display: inline-flex;
    position: relative;
    height: 100%;
    &.kt_on_drag_over {
      background-color: var(--editorGroup-dropBackground);
    }
    &::-webkit-scrollbar {
      display: none;
    }
    .kt_editor_tab {
      display: flex;
      position: relative;
      align-items: center;
      padding: 0 12px;
      border-right: 1px solid var(--tab-border);
      height: 100%;
      line-height: 100%;
      font-size: 12px;
      min-width: 112px;
      cursor: pointer;
      color: var(--tab-inactiveForeground);
      background: var(--tab-inactiveBackground);
      border-top: 1px solid transparent;
      z-index: 1;
      word-break: keep-all;
      white-space: nowrap;
      &::after {
        position: absolute;
        content: '';
        height: 1px;
        width: 100%;
        bottom: 0;
        left: 0;
        z-index: 10;
        background-color: var(--tab-border);
      }
      .tab_loading {
        display: block;
        position: absolute;
        font-size: 14px;
        left: 13.5px;
      }
      :global(.icon-label::before) {
        font-size: calc(1.5 * 14px) !important;
        transition: transform 0.2s ease-in;
      }
      .small::before {
        transform: scale(0.8);
      }
      &:hover {
        color: var(--tab-hoverForeground);
        background-color: var(--tab-hoverBackground);
      }
      div:first-child {
        margin-right: 5px;
        flex-shrink: 0;
        flex-grow: 0;
        &::before {
          background-size: 14px;
          background-position: 2px;
        }
      }

      &:last-child {
        margin-right: 10px;
      }

      .editor_readonly_icon {
        margin-left: 8px;
      }
      .kt_editor_close_icon {
        margin-right: 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
        &::before {
          font-size: 14px;
        }
      }
      div:nth-child(2) {
        flex-grow: 1;
        text-align: left;
      }
      .subname {
        color: var(--descriptionForeground);
        margin-left: 10px;
        font-size: 12px;
      }
      div.tab_right {
        margin-left: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 16px;
        flex-shrink: 0;
        flex-grow: 0;
        height: 16px;
        line-height: 16px;
        font-size: 16px;
        border-radius: 4px;
        padding: 1px;
        &:hover {
          transform: scale(1.1);
          background-color: var(--kt-icon-hoverBackground);
        }
      }
      .dirty {
        display: flex;
        justify-content: center;
        align-items: center;
        &::before {
          content: '';
          width: 8px;
          height: 8px;
          border-radius: 5px;
          background-color: var(--kt-dirtyDot-foreground);
        }
      }
      &.kt_editor_tab_current {
        position: relative;
        background: var(--tab-activeBackground);
        color: var(--tab-activeForeground);
        z-index: var(--stacking-level-editor-tabbar-current, 11);
        &::before {
          position: absolute;
          content: '';
          height: 1px;
          width: 100%;
          top: -1px;
          left: 0;
          z-index: var(--stacking-level-overlay, 800);
          background-color: var(--tab-activeBorderTop);
        }
        .dirty {
          &::before {
            background-color: var(--kt-dirtyDot-foreground);
          }
        }
      }
      &.kt_editor_tab_current_prev {
        display: flex;
      }
      &.kt_editor_tab_current_next {
        display: flex;
      }
      &.kt_editor_tab_dirty {
        display: flex;
      }
      &.kt_on_drag_over {
        background-color: var(--editorGroup-dropBackground);
      }
      .close_tab {
        display: none;
      }
      &:hover {
        .dirty {
          display: none;
        }
        .close_tab {
          display: block;
        }
      }
    }
  }

  .editorGroupHeader {
    z-index: var(--stacking-level-workbench, 1);
    position: relative;
    background-color: var(--editorGroupHeader-tabsBackground);
  }

  .kt_editor_body {
    flex: 1;
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    flex-direction: column;
    &::after {
      z-index: 100;
      content: '';
      background: var(--editorGroup-dropBackground);
      opacity: 0;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      display: none;
      user-select: none;
      pointer-events: none;
      transition: all 200ms ease-in-out;
    }
    &.kt_on_drag_over {
      &::after {
        opacity: 0.5;
        display: block;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }
      &.kt_on_drag_over_left {
        &::after {
          opacity: 0.5;
          display: block;
          width: 50%;
          height: 100%;
          top: 0;
          left: 0;
        }
      }
      &.kt_on_drag_over_right {
        &::after {
          opacity: 0.5;
          display: block;
          width: 50%;
          height: 100%;
          top: 0;
          left: 50%;
        }
      }
      &.kt_on_drag_over_top {
        &::after {
          opacity: 0.5;
          display: block;
          width: 100%;
          height: 50%;
          top: 0;
          left: 0;
        }
      }
      &.kt_on_drag_over_bottom {
        &::after {
          opacity: 0.5;
          display: block;
          width: 100%;
          height: 50%;
          top: 50%;
          left: 0;
        }
      }
    }
  }
}

.kt_editor_component_wrapper {
  height: 100%;
  > div {
    height: 100%;
  }
}

.kt_hidden {
  display: none !important;
}

.kt_grid_vertical {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.kt_grid_vertical_child {
  height: 100%;
}

.kt_grid_horizontal {
  display: flex;
  flex-direction: row;
  height: 100%;
}
.kt_grid_horizontal_child {
  height: 100%;
}
.open_type_switcher {
  position: absolute;
  bottom: 37px;
  right: 10px;
  z-index: 100;
  background: var(--editorWidget-background);
  .overlay-shadow();
  display: flex;
  > .option {
    font-size: 12px;
    padding: 5px 10px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;

    &.current_type {
      color: var(--textLink-activeForeground);
    }
  }
}

.editor_action_tip {
  display: flex;
  position: absolute;
  bottom: calc(100% + 10px);
  right: -20px;
  color: var(--kt-popover-foreground);
  background: var(--kt-popover-background);
  border-color: var(--kt-popover-border);
  .overlay-shadow();
  border-radius: 2px;
  padding: 5px 10px;
  z-index: var(--stacking-level-overlay-top, 1000);
  white-space: nowrap;
  .editor_action_tip_close {
    cursor: pointer;
  }

  &::after {
    position: absolute;
    right: 20px;
    margin-left: -7px;
    top: 100%;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 7px 0 7px;
    border-color: var(--kt-popover-background) transparent transparent transparent;
  }

  &::before {
    content: '';
    position: absolute;
    right: 20px;
    top: 100%;
    width: 100%;
    height: 15px;
    border-style: solid;
    background: transparent;
    border: 0;
  }
}

:global {
  :local(.editor_action_tip_wrapper) {
    background-color: var(--kt-editorActionToolTip-background) !important;
    color: var(--kt-editorActionToolTip-foreground) !important;
    z-index: 10 !important;

    &.top {
      &::after {
        border-color: var(--kt-editorActionToolTip-background) transparent transparent transparent !important;
      }
    }
    &.bottom {
      &::after {
        border-color: transparent transparent var(--kt-editorActionToolTip-background) transparent !important;
      }
    }
  }
}

.kt_editor_side_widgets {
  &.kt_editor_side_widgets_bottom {
    display: block;
    flex-shrink: 0;
  }
  &.kt_editor_side_widgets_top {
    display: block;
    flex-shrink: 0;
  }
}

// -------------- styles for editor empty component starts --------------
.editorEmpty {
  width: 100%;
  height: 100%;
  position: relative;
}

.editorEmptyImg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
}

// -------------- styles for editor empty component ends --------------