//////////////////////////////////// Code ////////////////////////////////////

code,pre {
  background: $article-code-bg;
  font-family: $code;
  color: $article-code;
}

p,li,table {
  code {
    padding: .1rem .4rem .2rem;
    border-radius: $radius;
    color: $article-code;
    white-space: nowrap;
    font-size: 1rem;
    font-style: normal;
  }
}

// Don't allow code formatting in headings
h1,h2,h3,h4,h5,h6 {
  code {
    padding: inherit !important;
    background: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    font-family: $proxima;
    color: inherit !important;
  }
}

a {
  code {
    font-weight: normal;
    transition: color .2s;
    position: relative;
    color: $article-code-link;
    &:after {
      content: "";
      position: absolute;
      display: block;
      top: 0;
      right: 0;
      border-style: solid;
      border-width: 0 .4rem .4rem 0;
      border-color: transparent rgba($article-code-link, .35) transparent transparent;
      transition: border .2s;
    }
  }
  &:hover {
    code {
      color: $article-code-link-hover;
      &:after {
        border-color: transparent $article-link-hover transparent transparent;
      }
    }
  }
}


pre {
  margin: 2rem 0 2.25rem;
  padding: 1.75rem 1.75rem 1.25rem;
  border-radius: $radius;
  overflow-x: scroll;
  overflow-y: hidden;
  font-size: 1rem;
  code {
    padding: 0;
    line-height: 1.7rem;
    white-space: pre;
  }

  // These API method styles are imported because they are used in other places.
  @import "code-api-methods";
}

////////////// Styles for calling out specific code in code blocks /////////////
/// 
span.code-callout, .code-placeholder {
  font-weight:bold;
  margin:0 .15rem;

  &.green {color: $article-code-accent3;}
  &.magenta {color: $br-new-magenta;}
  &.orange {color: $r-curacao;}
  &.delete, &.strike {text-decoration: line-through;}
}

/////////////// Styles for code placeholders that can be updated ///////////////
.code-placeholder-wrapper {
  display: inline;
  position: relative;

  .code-placeholder {
    display: inline-block;
    margin:0 .15rem;
    padding: 0;
    line-height: 1.4em;
    color: $code-placeholder;
    font-weight: normal;
    font-style: normal;
    border-bottom: 1px dotted;
    transition: color .2s;
    cursor: pointer;
    
    .code-placeholder-edit-icon{
      font-style: normal;
      &::before {
        margin-left: .2rem;
        font-size: .8em;
        transition: opacity .2s;
        opacity: .65;
        z-index: -1;
      }
    }
  
    &:hover {
      color: $code-placeholder-hover;
      .code-placeholder-edit-icon::before {opacity: 1}
    }
  }

  .code-input-wrapper {
    position: absolute;
    top: -3px;
    left: -4.5px;
    z-index: 1;
    color: inherit;

    input.placeholder-edit {
      width: 100%;
      max-width: 100%;
      border: 1px solid $sidebar-search-bg;
      border-radius: $radius * 2;
      background-color: $sidebar-search-bg;
      padding: 2px 20px 2px 6px;
      color: $code-placeholder-hover;
      font-weight: normal;
      &:focus {
        outline: none;
        border-color: rgba($code-placeholder-hover, .75);
        box-shadow: 1px 1px 8px rgba($code-placeholder-hover, .5);
        border-radius: 2px;
      }
    }

    &:hover {cursor: pointer;}

    &:after {
      content: "\e937";
      color: $code-placeholder-hover;
      font-family: 'icomoon-v4';
      display: block;
      position: absolute;
      top: 0;
      right: 3px;
    }
  }
}
.code-placeholder-key code {color: $code-placeholder !important}


////////////////////////////////////////////////////////////////////////////////
///////////////////////////////// MEDIA QUERIES ////////////////////////////////
////////////////////////////////////////////////////////////////////////////////

@include media(small) {
  pre {
    padding: 1.2em 1.2em .75rem;
  }
}