.terminal {
  background-color: #2b2b2b;
  color: #ebebeb;
  border: 1px solid #666;
  padding: 0.625rem 0;

  /* Followed by another terminal */
  &:has(+ &) {
    border-bottom: 0;
    padding-bottom: 0;
  }

  /* Preceded by another terminal */
  & + & {
    border-top: 0;
    padding-top: 0;
  }
}

.terminal .highlight {
  background-color: #2b2b2b;
  color: #ebebeb;
}

.terminal .output {
  display: block;
  padding: 0 0.875rem;
  white-space: break-spaces;
}

.terminal .container.input {
  display: block;
  padding: 0 0.4rem 0 0.875rem;
  line-height: 1;
  min-height: 1.3em;
}

.terminal .input .literal {
  white-space-collapse: preserve-breaks;
  background: transparent;
  padding: 0;
}

.terminal .input .prompt {
  display: inline;
  font-weight: bold;
  color: yellowgreen;
}

.terminal-code pre {
  font-size: var(--font-size--small--2);
  background-color: #2b2b2b;
  white-space: pre-wrap;
}

div.terminal-code {
  margin: 0;
}

/* Rules for the 'scroll' option */
.terminal.scroll {
  overflow-x: auto;

  .container.input {
    display: flex;
    white-space: nowrap;
    width: max-content;
  }

  .input .literal {
    white-space: pre;
  }

  .terminal-code {
    width: max-content;
  }

  button.copybtn {
    position: sticky;
    margin-left: auto;
  }
}

/* Copybutton settings */

div.input {
  position: relative;
}

div.input > button.copybtn {
  overflow-y: visible;
  top: 0;
  right: 0.1em;
  width: 1.4em;
  height: 1.4em;
}

div.input > button.copybtn svg {
  width: 1.2em;
  height: 1.2em;
}

.input:hover button.copybtn,
button.copybtn.success {
  opacity: 1;
}

.input button.copybtn {
  align-items: center;
  background-color: #2b2b2b;
  border: none;
  color: #f8f8f8;
  cursor: pointer;
  transition:
    color 0.3s,
    opacity 0.3s;
}

/* Hide the default CSS tooltip */
.terminal .o-tooltip--left:hover:after {
  display: none;
}