/*
 * TermDemo structural styles. Palette and sizing are tuned per demo via CSS
 * custom properties set on the screen element:
 *
 *   --td-height          fixed screen height (scrollback clips above it)
 *   --td-fade            height of the fade masking overflowing scrollback
 *   --td-output-indent   left padding for command output lines
 *   --td-output-color    output text color
 *   --td-cursor-color    block cursor color
 *   --td-kbd-border / --td-kbd-color        keycap chrome
 *   --td-press-color / --td-press-bg        keypress flash
 */

.td-screen {
  height: var(--td-height, auto);
  overflow: hidden;
}

/* Once scrollback overflows (td-overflow is toggled by scrollBottom), fade
 * the oldest line out at the top edge instead of cutting it mid-character. */
.td-screen.td-overflow {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--td-fade, 12px)
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--td-fade, 12px)
  );
}

.td-line {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.td-output {
  padding-left: var(--td-output-indent, 17px);
  color: var(--td-output-color, #8c8278);
  white-space: pre;
}

.td-cursor {
  display: inline-block;
  width: 7px;
  height: 13px;
  margin-left: 2px;
  background: var(--td-cursor-color, #f0e8d3);
  vertical-align: text-bottom;
  animation: td-cursor-blink 1.1s steps(1) infinite;
}

@keyframes td-cursor-blink {
  50% {
    opacity: 0;
  }
}

.td-hidden {
  visibility: hidden;
}

.td-kbd {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--td-kbd-border, rgba(240, 232, 211, 0.38));
  border-radius: 3px;
  color: var(--td-kbd-color, #f0e8d3);
  font: inherit;
  /* After the font shorthand: keycaps must fit inside the line box so
   * keycap rows keep the same height as plain text rows and the scroll
   * rhythm stays uniform. */
  line-height: 1.1;
  transition: background 160ms ease, color 160ms ease,
    border-color 160ms ease;
}

.td-pressed .td-kbd,
.td-kbd.td-pressed {
  border-color: var(--td-press-color, #f2d08a);
  background: var(--td-press-bg, rgba(242, 208, 138, 0.22));
  color: var(--td-press-color, #f2d08a);
}

@media (prefers-reduced-motion: reduce) {
  .td-cursor {
    animation: none;
  }
}