.terminal-container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: $terminal-bgcolor;

  &.show-max {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    height: 100%;
  }

  .terminal-control {
    position: absolute;
    top: 10px;
    right: 30px;
    z-index: 100;

    &.log-top-control {
      top: 10px;
      bottom: auto;
    }

    .ant-btn {
      color: $white;
      border-radius: 16px;
      opacity: 0.5;

      > i {
        color: white;
      }

      &:hover {
        border-color: white;
        opacity: 1;
      }

      &:focus {
        border-color: white;
      }
    }
  }

  .terminal {
    .xterm-viewport::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }

    .xterm-viewport {
      width: 100%;
      scrollbar-width: none; /* firefox */
      -ms-overflow-style: none; /* IE 10+ */
    }
  }
}

/**
 *  Default styles for xterm.js
 */

.xterm {
  position: relative;
  font-family: courier-new, courier, monospace;

  cursor: text;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  font-feature-settings: 'liga' 0;
}

.xterm.focus,
.xterm:focus {
  outline: none;
}

.xterm .xterm-helpers {
  position: absolute;
  top: 0;
  /**
     * The z-index of the helpers must be higher than the canvases in order for
     * IMEs to appear on top.
     */
  z-index: 10;
}

.xterm .xterm-helper-textarea {
  /*
     * HACK: to fix IE's blinking cursor
     * Move textarea out of the screen to the far left, so that the cursor is not visible.
     */
  position: absolute;
  top: 0;
  left: -9999em;
  z-index: -10;
  width: 0;
  height: 0;
  overflow: hidden;
  /** Prevent wrapping so the IME appears against the textarea at the correct position */
  white-space: nowrap;
  opacity: 0;
  resize: none;
}

.xterm .composition-view {
  position: absolute;
  z-index: 1;
  display: none;
  color: $white;
  white-space: nowrap;
  /* TODO: Composition position got messed up somewhere */
  background: #000000;
}

.xterm .composition-view.active {
  display: block;
}

.xterm .xterm-viewport {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  overflow-y: scroll;
  /* On OS X this is required in order for the scroll bar to appear fully opaque */
  background-color: #000000;
  cursor: default;
}

.xterm .xterm-screen {
  position: relative;
}

.xterm .xterm-screen canvas {
  position: absolute;
  top: 0;
  left: 0;
}

.xterm .xterm-scroll-area {
  visibility: hidden;
}

.xterm-char-measure-element {
  position: absolute;
  top: 0;
  left: -9999em;
  display: inline-block;
  line-height: normal;
  visibility: hidden;
}

.xterm.enable-mouse-events {
  /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
  cursor: default;
}

.xterm.xterm-cursor-pointer {
  cursor: pointer;
}

.xterm.xterm-cursor-crosshair {
  /* Column selection mode */
  cursor: crosshair;
}

.xterm .xterm-accessibility,
.xterm .xterm-message {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  color: transparent;
}

.xterm .live-region {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
