thebelab.scss

@import '../../../node_modules/carbon-components/scss/globals/scss/layout';
@import '../variables/colors.scss';
@import '../variables/fonts.scss';

/* in-cell thebelab buttons */
.thebebtn {
  position: absolute;
  left: 0;
  bottom: 0;
  border: none;

  i {
    font-style: normal;
    color: $text-color-lighter;
  }
  
  button {
    background-color: $background-color-light;
    border: none;
    padding: 6px 16px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color .2s linear, color .2s linear;
    &:hover {
      color: $text-color-white;
      background-color: $background-color-darker;
    }
    &:active {
      background-color: $background-color-white;
      color: $text-color-dark;
    }
  }
}
  
.input_area .highlight {
  position: relative;
}

// Hide code buttons
div.jb_input div.input {
  position: relative;
}


.thebelab-cell {
  // To ensure that thebelab cells are always the top of the Z-stack
  position: relative;
  z-index: 999;
  border: 1px solid $border-color;
  background-color: $background-color-lighter;
  border-radius: 0px;
  margin: 2em 0;
  display: flex;
  flex-direction: column;

  &:focus-within {
    border-color: $active-color;
  }
}

.thebelab-input {
  padding: $spacing-05 $spacing-04 $spacing-03 $spacing-04;
}

.thebelab-button {
  font-family: $plex-sans;
  font-size: 0.9em;
  z-index: 999;
  display: inline-block;
  padding: $spacing-03 $spacing-05;
  position: relative;
  align-self: flex-end;
  width: 6rem;
  box-sizing:  border-box;
  text-decoration: none;
  font-weight: 300;
  text-align: center;
  transition: all 0.2s;
  border: none;

  background-color: $background-color-darker;
  color: $text-color-white;
}

.thebelab-button:hover{
  background-color: $background-color-light;
  color: $text-color-dark;
  cursor: pointer;
}

.thebelab-button:active{
  background-color: $background-color-white;
  color: $text-color-dark;
}

.thebelab-busy {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;

  background-color: $background-color-darker;
  color: $text-color-white;
}

.thebelab-busy-spinner {
  border-top-color: $border-color-tertiary;
}

.CodeMirror {
  font-family: $plex-mono;
}

x-step, .code-output {
    pre {
      font-family: $plex-mono;
      margin: 0;
      white-space: pre-wrap;
      word-wrap: break-word;
    }
}

.code-exercise__editor-block, .scratchpad__editor-block{
    border-bottom: 1px solid $border-color;
    margin-bottom: -1px;  // To avoid double border when cell is running
}

.code-exercise {
  border: 1px solid $border-color;
  margin: $spacing-07 0;
}

.jp-OutputArea, .code-exercise__initial-code {
  padding: 18px;
  padding-top: 19px;  // To account for negative margin in editor block
  font-size: 12px;
}

.code-exercise__initial-code__hidden-output, .jp-OutputArea:empty {
  display: none;
}

.jp-OutputArea-child {
  background-color: $background-color-white;
}

.jp-OutputArea-prompt {
  // Contains the cell execution no. (e.g. `[3]`)
  display: none;
}