.terminal {
  background-color: #2b2b2b;
  color: #ebebeb;
  border: 1px solid #666;
  padding: 0.625rem 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;
}

.terminal .input .literal {
  white-space-collapse: break-spaces;
  background: transparent;
}

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

.terminal.scroll .input,
.terminal.scroll .output {
  width: max-content;
}

.terminal-code pre {
  font-size: var(--font-size--small--2);
  background-color: transparent;
}

div.terminal-code {
  margin: 0 0;
}

/* Copybutton settings */

div.input {
  position: relative;
}

div.input > button.copybtn {
  overflow-y: visible;
  top: 0.1em;
  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;
}

.terminal.scroll > .input {
  width: inherit;
}

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