@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
@import '../../../scss/variables';
@import '../../../scss/bootstrap/variables';

div.react-console-container {
  font-size: 0.875em;
  font-family: $font-family-monospace;
  min-height: calc(100vh - 112px);
  box-sizing: border-box;
  white-space: pre;
  padding: 2rem;
  cursor: text;
}

// div.react-console-prompt-box {

// }

span.react-console-prompt-label {
  font-weight: $font-weight-semibold;
  color: $secondary;
  line-height: 24px;
  text-align: right;
  display: inline-block;
}

.react-console-prompt-label::before {
  content: '\232A';
  padding-right: 10px;
}

span.react-console-prompt {
  color: $dfi-pink;
  line-height: 1.5rem;
  display: inline-block;
}

div.react-console-focus span.react-console-cursor {
  background: $dfi-pink;
}

span.react-console-cursor {
  display: inline-block;
  content: '';
  width: 8px;
  height: 1.5rem;
  vertical-align: bottom;
}

div.react-console-nofocus span.react-console-cursor {
  background: none;
}

div.react-console-focus span.react-console-cursor-idle {
  animation: blink 1s infinite;
}

div.react-console-welcome {
  font-weight: $font-weight-medium;
}

@keyframes blink {
  0% {
    background-color: $dfi-pink;
  }

  25% {
    background-color: $dfi-pink;
  }

  26% {
    background-color: transparent;
  }

  75% {
    background-color: transparent;
  }

  76% {
    background-color: $dfi-pink;
  }
}

div.react-console-message {
  word-break: break-all;
  white-space: pre-wrap;
  line-height: 1.5rem;
}

div.react-console-prompt-box {
  span {
    word-break: break-all;
    white-space: pre-line;
    color: $body-color;
  }
}

/*# sourceMappingURL=react-console.css.map*/
