code-example,
code-tabs md-tab-body {
    background-color: rgba($backgroundgray, 0.2);
    border: 0.5px solid $lightgray;
    border-radius: 5px;
    color: $darkgray;
    display: block;
    padding: 8px 16px;
    margin: 16px auto;

    code {
      overflow: auto;
    }
}

// TERMINAL / SHELL TEXT STYLES

code-example.code-shell, code-example[language=sh], code-example[language=bash] {
  background-color: $darkgray;
}

code-example header {
  background-color: $accentblue;
  border-radius: 5px 5px 0 0;
  color: $offwhite;
  font-size: 16px;
  padding: 10px;
  margin: -17px;
}

code-example.is-anti-pattern header {
  border: 2px solid $anti-pattern;
  background: $anti-pattern;
}

code-example.is-anti-pattern,
code-tabs.is-anti-pattern md-tab-body {
  border: 0.5px solid $anti-pattern;
}

code-tabs div .mat-tab-body-content {
  height: auto;
}

code-tabs .mat-tab-body-wrapper md-tab-body .mat-tab-body {
  overflow-y: hidden;
}

code-tabs mat-tab-body-content .fadeIn {
  animation: opacity 2s ease-in;
}

aio-code pre {
    display: flex;
    padding: 0 48px 0 0;
    min-height: 32px;
    white-space: pre-wrap;
    align-items: center;

    code span, code ol li {
      line-height: 24px;
    }
}

code ol {
  font-family: $main-font;
  color: $lightgray;

  li {
    margin: 0;
    font-family: $code-font;
    font-size: 90%;
  }
}

aio-code.headed-code {
  pre.prettyprint {
    margin-top: 32px;
  }
}

.code-missing {
  color: $darkred;
}

.prettyprint {
  position: relative;
}

.copy-button {
  color: $lightgray;
  background-color: transparent;
  border: none;
  &:hover {
    color: $mediumgray;
  }
  
  @media (max-width: 480px) {
    top: 0;
    bottom: 0;
  }
}

.lang-sh .copy-button, .lang-bash .copy-button {
  color: $mediumgray;
  &:hover {
    color: $lightgray;
  }
}

.code-tab-group div.mat-tab-body-content {
  height: auto;
  transform: none;
}

$blue-grey-50: #ECEFF1;
$blue-grey-100: #CFD8DC;
$blue-grey-200: #B0BEC5;
$blue-grey-300: #90A4AE;
$blue-grey-400: #78909C;
$blue-grey-500: #607D8B;
$blue-grey-600: #546E7A;
$blue-grey-700: #455A64;
$blue-grey-800: #37474F;
$blue-grey-900: #263238;

$white: #FFFFFF;

/* SCREEN COLORS */

  .pnk,
  .blk {
    border-radius: 4px;
    padding: 2px 4px;
  }
  .pnk {
    background: $blue-grey-50;
    color: $blue-grey-900;
  }
  .blk {
    background: $blue-grey-900;
  }
  .otl {
    outline: 1px solid rgba($blue-grey-700, .56);
  }
  .kwd {
    color: $darkgray;
  }
  .typ,
  .tag {
    color: $darkred;
  }
  .str,
  .atv {
    color: $blue;
  }
  .atn {
    color: $blue;
  }
  .com {
    color: $mediumgray;
  }
  .lit {
    color: $blue;
  }
  .pun {
    color: $blue-grey-700;
  }
  .pln {
    color: $green-800;
  }
  .dec {
    color: $blue;
  }

/* SHELL / TERMINAL CODE BLOCKS */

code-example.code-shell, code-example[language=sh], code-example[language=bash] {
  & .pnk, .blk,.pln, .otl, .kwd, .typ, .tag, .str, .atv, .atn, .com, .lit, .pun, .dec {
    color: $codegreen;
  }
}

/* PRINT COLORS */


@media print {
  border: none;
  box-shadow: none;

  ol {
    background: $white;
  }

  .kwd {
    color: $darkgray;
  }
  .typ,
  .tag {
    color: $darkred;
  }
  .str,
  .atv {
    color: $blue;
  }
  .atn {
    color: $blue;
  }
  .com {
    color: $mediumgray;
  }
  .lit {
    color: $blue;
  }
  .pun {
    color: $blue-grey-700;
  }
  .pln {
    color: $green-800;
  }
  .dec {
    color: $blue;
  }
}

// REMOVE RIPPLE EFFECT FROM MATERIAL TABS
code-tabs md-tab-group *.mat-ripple-element, code-tabs md-tab-group *.mat-tab-body-active, code-tabs md-tab-group *.mat-tab-body-content, code-tabs md-tab-group *.mat-tab-list, code-tabs md-tab-gropu *.mat-tab-body-content {
  transform: none !important;
}

[role="tabpanel"] {
    transition: none;
}