
.terms-box
  background var(--main)
  position relative
.loading-wrapper
  padding 30px
  z-index 100
.term-search-box
  position absolute
  right 5px
  top 5px
  z-index 30

.terminal-control
  background var(--main)
  line-height 32px
  padding 0 10px

.terms-box
  position relative
.term-wrap
  background var(--main)
  position absolute

.vertical
  .term-wrap.not-first-term
    border-top 1px solid var(--main-lighter)
.horizontal
  .term-wrap.not-first-term
    border-left 1px solid var(--main-lighter)
.term-sftp-tabs
  margin-left 5px

#container
  .xterm
    background transparent
  .xterm-viewport
    background-color transparent !important
  .xterm-screen::before
    content ''
    position absolute
    top 0
    left 0
    width 100%
    height 100%
    background-repeat no-repeat
    background-position center
    background-color transparent !important

.terminal-normal-buffer
  position absolute
  left 0
  top 0
  width 100%
  background var(--main)
  color var(--text)
  box-shadow 0px 3px 3px 0px var(--main-lighter)
  z-index 66
  padding-bottom 32px
.terminal-normal-buffer-body
  overflow-y scroll
  max-height 300px
.terminal-normal-buffer-close
  cursor pointer
  font-size 14px
  color var(--text)
  &:hover
    color var(--text-light)
.terminal-normal-buffer-footer
  position absolute
  left 0
  top calc(100% - 32px)
  width 100%
  height 32px
  line-height 32px
  box-shadow 0px -3px 3px 0px var(--main)
  background var(--main-lighter)
.batch-input-wrap
  width calc(100% - 80px)

.terminal-suggestions-wrap
  position absolute
  z-index 100
  max-height 300px
  max-width 300px
  min-width 200px
  box-shadow 0px 0px 3px 3px var(--main-lighter)
  display flex
  flex-direction column
  background var(--main)
  border-radius 4px
  &.reverse .terminal-suggestions-list
    border-top 1px solid var(--main-lighter)
    border-bottom none

.terminal-suggestions-list
  flex 1
  overflow-x hidden
  overflow-y auto
  max-height 268px
  max-width 300px
  border-bottom 1px solid var(--main-lighter)

.terminal-suggestions-sticky
  flex-shrink 0
  height 32px
  padding 0 10px
  line-height 32px

.suggestion-item
  display flex
  align-items center
  padding 5px 10px
  cursor pointer
  color var(--text)
  &:hover
    background-color var(--main-lighter)
    .suggestion-delete
      visibility visible

.suggestion-command
  flex-grow 1
  white-space nowrap
  overflow hidden
  text-overflow ellipsis

.suggestion-type
  margin-left 5px
  font-size 0.8em
  color var(--text)
  &:hover
    color var(--success)

.suggestion-hint
  margin-left 5px
  font-size 0.8em
  color var(--text-light, #888)
  white-space nowrap
  overflow hidden
  text-overflow ellipsis
  max-width 150px

.suggestion-delete
  margin-left 5px
  visibility hidden

.term-search-bar
  position absolute
  right 0
  top 0
  bottom 0
  background transparent
  width 16px
.paste-text
  max-height 200px
  overflow-y scroll

.terminal-reconnect-overlay
  position absolute
  bottom 6px
  right 12px
  font-size 11px
  color rgba(255, 255, 255, 0.55)
  pointer-events none
  z-index 110

.terminal-error-handle
  position absolute
  left 0
  top 0
  z-index 100
  background var(--main)
  max-width calc(100% - 24px)

.terminal-fontsize-reset
  position absolute
  left 8px
  bottom 4px