/*
 * webterm container styles.
 *
 * This is not xterm's own stylesheet; @xterm/xterm/css/xterm.css is still
 * required and is the consumer's import, since they may already have it. What
 * is here is only what the container and the graphics overlay need.
 */

.webterm {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--webterm-background, #1e1e2e);
}

/* xterm's own padding would put the grid off the cell boundary the overlay
 * positions against, so any inset belongs on the container instead. */
.webterm .xterm {
  padding: 0;
}

.webterm .xterm-viewport {
  scrollbar-width: thin;
  scrollbar-color: var(--webterm-scrollbar, #585b70) transparent;
}

.webterm .xterm-viewport::-webkit-scrollbar {
  width: 10px;
}

.webterm .xterm-viewport::-webkit-scrollbar-thumb {
  background: var(--webterm-scrollbar, #585b70);
  border-radius: 5px;
}

.webterm .xterm-viewport::-webkit-scrollbar-track {
  background: transparent;
}

/* The kitty graphics layer. Sized and positioned from script; the properties
 * here are the ones a consumer may reasonably want to override. */
.webterm-kitty-overlay {
  pointer-events: none;
}

.webterm-kitty-overlay canvas {
  image-rendering: var(--webterm-kitty-image-rendering, auto);
}