/**
 * XTerminal styles
 * @author Henry Hale
 * @license MIT
 * @url https://github.com/henryhale/xterminal
 */

:root {
  --xt-bg: #191a22;
  --xt-fg: #efefef;
  --xt-font-family: monospace;
  --xt-font-size: min(15px, calc(2vw + 5px));
  --xt-padding: min(6px, calc(1.25vw + 4px));
}

.xt,
.xt *,
.xt *::after,
.xt *::before {
  box-sizing: border-box;
  font-size: var(--xt-font-size);
  font-family: var(--xt-font-family);
}

.xt {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  background-color: var(--xt-bg);
  color: var(--xt-fg);
  padding: var(--xt-padding);
  padding-bottom: calc(var(--xt-padding) + var(--tc-toolbar-height, 0px));
  overflow-y: auto;
  overflow-x: hidden;
  overflow-wrap: break-word;
}

.xt > .xt-stdout > span:first {
  word-wrap: break-word;
}

.xt > .xt-stdout > .xt-cursor {
  background-color: var(--xt-fg);
  color: var(--xt-bg);
  border: 0.25px solid transparent;
  /* 终端聚焦时使用方块光标闪烁，模拟命令行输入体验。 */
  animation: xt-cursor-blink 1.6s steps(1, end) infinite;
}

.xt.xt-inactive > .xt-stdout > .xt-cursor {
  background-color: transparent;
  color: var(--xt-fg);
  border-color: currentColor;
  animation: none;
}

.xt > .xt-stdin {
  height: 0;
  position: relative;
  margin-top: 2px;
}

.xt > .xt-stdin > input,
.xt > .xt-stdin > textarea {
  border: 0 none;
  outline: 0 none;
  /* 使用 fixed 悬浮在顶部顶端，避免 iOS Safari 因为聚焦底部的 input 而强行将整个网页（body）整体上推，从而破坏底部原生工具栏/地址胶囊的透明悬浮效果 */
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  opacity: 0;
  z-index: -100;
  resize: none;
  overflow: hidden;
  white-space: pre;
  appearance: none;
  -webkit-appearance: none;
  /* 隐藏浏览器原生插入光标，避免与自绘方块光标重叠。 */
  caret-color: transparent;
  /* iOS Safari 在输入框字号小于 16px 时会触发页面自动放大，导致聚焦后产生空白黑边。 */
  font-size: 16px;
}

@keyframes xt-cursor-blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

.xt .xt-hidden {
  display: none;
}