code {
  background-color: $code-background;
  border: 1px solid $border;
  border-radius: $border-radius-base;
  font-size: 0.9em;
  display: inline;
  max-width: 100%;
}

strong > code {
  font-weight: 600;
}


a {
  code {
    color: $blue-darker;
  }
}

pre {
  color: $charcoal;
  background-color: $sidebar-gray;
  border: 1px solid $ash;
  border-radius: $border-radius-base;
  margin-bottom: rem-calc(16);
  padding: .5rem 0 .5rem .5rem;

  code {
    background-color: transparent;
    border: none;
    word-wrap: break-word;
    padding: 0;
  }

  // customization for CodeMirror's line numbers
  .line-numbers {
    margin-right: rem-calc(16px);
    user-select: none;
  }
}

table {
  code {
    border: 1px solid $code-border;
  }
  pre {
    border: 1px solid $code-border;
    code {
      border: none;
    }
  }
}

.code {
  background-color: $slate;
  color: $orange;
  font-family: $font-family-monospace;

  .output {
    color: $sidebar-gray;
  }
}

.codeblock {
  .title {
    font-weight: bold;
  }
}

.browser {
  .url {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 18px;
    left: 0px;

    > span {
      border-radius: $border-radius-base;
      color: $white;
      background: $slate-light;

    }
  }
}

@import "chroma";
