.xterm-viewport,
.xterm-screen {
  &::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0);
    cursor: pointer;
    margin: 2px;
  }

  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: var(--senary-contrast);
    border-radius: 10px;
    transition: background-color 0.3s ease;
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: var(--quaternary-contrast);
  }
}

// Override terminal styles
.xterm {
  height: 100%;
  width: 100%;
}

.xterm-viewport {
  overflow-y: auto !important;
  height: 100% !important;
  width: 100% !important;
  background-color: var(--octonary-contrast) !important;
  transition: background-color 0.3s ease;
}

.xterm-screen {
  padding: 10px;
  box-sizing: border-box;
  overflow: visible !important;
  height: 100% !important;
  width: 100% !important;
}

.xterm-rows {
  height: 100% !important;
  overflow: visible !important;
  color: var(--primary-contrast) !important;
  transition: color 0.3s ease;
  // It is important to not alter the font-size or the selection would lose in precision

  .xterm-cursor {
    &.xterm-cursor-outline {
      outline-color: var(--primary-contrast) !important;
    }
    &.xterm-cursor-block {
      background: var(--primary-contrast) !important;
    }
  }
}

.xterm-selection {
  top: 10px !important;
  left: 10px !important;
  div {
    background-color: transparent !important;
  }
}

.xterm-decoration-top {
  background-color: var(--quinary-contrast) !important;
}

.xterm-fg-11 {
  color: var(--electric-violet) !important;
}

.xterm-fg-4 {
  color: var(--bright-blue) !important;
}

// progress ###
.xterm-fg-15 {
  color: var(--secondary-contrast) !important;
}

.xterm-fg-14 {
  color: var(--vivid-pink) !important;
}

// > in terminal
.xterm-fg-5 {
  color: var(--electric-violet) !important;
}

// error text, warning text
.xterm-fg-9,
.xterm-fg-3 {
  color: var(--vivid-pink) !important;
}

.xterm-fg-10,
.xterm-fg-2 {
  color: var(--symbolic-green) !important;
}

// error bg
.xterm-bg-1 {
  background-color: var(--orange-red) !important;
}

// error text
.xterm-fg-257 {
  color: var(--octonary-contrast) !important;
}

.xterm-fg-8 {
  color: var(--tertiary-contrast) !important;
}
