@import "../_variables";

/* CLIcomponent.module.scss */

.fixedOverlay {
  position: fixed;
  height: 100vh;
  width: 83.5%;
  top: 0;
  left: 16.5%;
  pointer-events: none;
  z-index: 12;

  .terminalHeader {
    .terminalWrapper {
      width: 100%;
      height: 100vh;
      position: relative;
      transition: all 0.3s ease-in-out;

      :global {
        // .xterm-viewport {
        //   overflow:auto !important;

        //   &::-webkit-scrollbar {
        //     width: 10px;
        //   }

        //   /* Track */
        //   &::-webkit-scrollbar-track {
        //     background: #f1f1f1;
        //   }

        //   /* Handle */
        //   &::-webkit-scrollbar-thumb {
        //     background: #888;
        //   }

        //   /* Handle on hover */
        //   &::-webkit-scrollbar-thumb:hover {
        //     background: #555;
        //   }
        // }
        div:first-child {
          .xterm-screen {
            background-color: var(--cli-bg);
            width: 100% !important;

            .xterm-rows {
              height: 100%;

              * {
                font-family: "Menlo for powerline", "Menlo", monospace !important;
              }
            }
          }
        }
      }

      .terminalContainer, .terminalContainer * {
        font-family: 'Menlo', 'Consolas', 'Liberation Mono', 'Courier New', monospace !important;
        letter-spacing: normal !important;
        font-variant-ligatures: none !important;
        white-space: pre !important;
        word-break: normal !important;
        // overflow-x: auto;
      }

      .terminalContainer {
        bottom: 0;
        width: 100%;
        position: absolute;
        padding: 8px;
        // padding-top: 3rem;
        padding-left: 1rem;
        cursor: text;
        pointer-events: all;
        color: var(--primary-color);
        background-color: var(--cli-bg);
        border-right: 1px solid var(--border-color-100);
      }

      .resizeHandle {
        top: 0;
        left: 0;
        right: 0;
        gap: 0.75rem;
        display: flex;
        font-weight: 600;
        cursor: ns-resize;
        position: absolute;
        align-items: center;
        padding: 0.3rem 1rem;
        height: 8px;
        color: var(--secondary-text);
        background-color: var(--cli-bg);
        border-top: 1px solid var(--border-color-100);

        &:hover {
          border-top: 4px solid var(--secondary-text-500);
        }

        .dragIcon {
          top: 6px;
          left: 50%;
          transform: translateX(-50%);
          position: absolute;
          background-color: var(--secondary-text);
          width: 3rem;
          border-radius: 4px;
          height: 2px !important;
        }
      }

      .terminalTabs {
        :global {
          .ant-tabs-nav {
            &::before {
              border: none;
            }

            .ant-tabs-nav-wrap {
              .ant-tabs-nav-list {
                .ant-tabs-tab {
                  padding: 0.3rem 0;

                  .ant-tabs-tab-btn {
                    text-transform: uppercase;
                    letter-spacing: 0.5px;

                    color: var(--secondary-text);
                  }
                }

                .ant-tabs-tab-active {
                  .ant-tabs-tab-btn {
                    color: var(--primary-purple);
                  }
                }
              }

              .ant-tabs-ink-bar {
                background-color: var(--primary-purple);
              }
            }
          }
        }
      }

      .copilotTerminalContainer {
        overflow: auto;
      }
    }

    .loadBox {
      color: var(--lime-green);
      padding: 1rem 0;

      .loadIcon {
        color: var(--lime-green);
        font-size: 12px;
      }
    }

    .terminalWrapperHide {
      @extend .terminalWrapper;
      transform: translateY(110vh);
    }
  }
}
