/*
* Embedded Code
*
* Style for embedded code examples
*/

.cp_embed_iframe {
  overflow: hidden;

  @media handheld and (max-width: $phone-breakpoint),
  screen and (max-device-width: $phone-breakpoint),
  screen and (max-width: $tablet-breakpoint) {
    width: 240px !important;
  }
}


/*
* Code Snippets
*
* These Code snippets are transformed by prettify and the code
* below represents a custom theme that works with their formatting.
*/

.prettyprint {
  background: $lightgrey;
  font-family: $mono-font;
  color: $darkgrey;
  width: auto;
  overflow: auto;
  position: relative;
  padding: 0px;
  font-size: 13px;
  // font-weight: 600;
  line-height: 24px;
  margin-bottom: $unit * 3;
  // box-shadow: 0px 2px 5px rgba($coal, .3);
  border-radius: 0px 0px 4px 4px;
  padding: ($unit * 2) ($unit * 4);

  &.linenums,
  &[class^="linenums:"],
  &[class*=" linenums:"]  {
    padding: 0px;
  }

  &.is-showcase {
    border: 4px solid $regal;
  }

  code {
    background: none;
    font-size: 13px;
    padding: 0px;
  }

  ol {
    background: $lightgrey;
    padding: ($unit * 2) ($unit * 4) ($unit * 2) ($unit * 7);
    margin: 0px;
    overflow: auto;
    // font-weight: 600;
    font-size: 13px;

    li {
      color: $bismark;
      background: none;
      margin-bottom: 5px;
      line-height: normal;
      list-style-type: decimal;
      font-size: 12px;

      &:last-child {
        margin-bottom: 0px;
      }

      code {
        background: none;
        font-size: 13px;
      }
    }
  }


  /*
  * Screen Colors
  *
  */

  .pnk,
  .blk {
    border-radius: 4px;
    padding: 2px 4px;
  }
  .pnk {
    background: $fog;
    color: $darkgrey;
  }
  .blk {
    background: $storm;
  }
  .otl {
    outline: 1px solid rgba(darkgrey, .56);
  }
  .kwd {
    color: $pink;
  }
  .typ,
  .tag {
    color: $pink;
  }
  .str,
  .atv {
    color: $olive;
  }
  .atn {
    color: $olive;
  }
  .com {
    color: $olive;
  }
  .lit {
    color: $olive;
  }
  .pun {
    color: $bismark;
  }
  .pln {
    color: $darkgrey;
  }
  .dec {
    color: $olive;
  }


  /*
  * Print Colors
  *
  */

  @media print {
    background: $lightgrey;
    border: none;
    box-shadow: none;

    ol {
      background: $lightgrey;
    }

    .kwd {
      color: $pink;
    }
    .typ,
    .tag {
      color: $pink;
    }
    .str,
    .atv {
      color: $olive;
    }
    .atn {
      color: $olive;
    }
    .com {
      color: $olive;
    }
    .lit {
      color: $olive;
    }
    .pun {
      color: $bismark;
    }
    .pln {
      color: $darkgrey;
    }
    .dec {
      color: $olive;
    }
  }
}