.article {
  flex-grow: 3;
  background: $article-bg;
  border-radius: $border-radius 0 0 0;
  padding: 2rem 4rem 3rem;
}

.article--content{
  max-width: 760px;
  h1,h2,h3,h4,h5,h6 {
    color: $article-heading;
    a {
      color: inherit !important;
      text-decoration: none;
      code:after {
        border: none;
      }
    }
  }
  h1 {
    font-family: $klavika;
    font-weight: 300;
    font-style: italic;
    font-size: 2.65rem;
    margin-bottom: 1em;
  }
  h2 {
    font-size: 2rem;
    margin: -1.5rem 0 .5rem;
    padding-top: 1.75rem;
  }
  h3 {
    font-size: 1.65rem;
    margin: -1.5rem 0 .5rem;
    padding-top: 1.75rem;
  }
  h4 {
    font-size: 1.25rem;
    font-style: italic;
    margin: -1.25rem 0 .5rem;
    padding-top: 1.75rem;
  }
  h5 {
    font-size: 1rem;
    margin: -1.25rem 0 .25rem;
    padding-top: 1.75rem;
  }
  h6 {
    font-size: 1rem;
    font-style: italic;
    margin: -1.25rem 0 .25rem;
    padding-top: 1.75rem;
  }

  p,li {
    color: $article-text;
    line-height: 1.6rem;
  }

  p {
    margin: 0 0 1.5em;
  }

  a {
    color: $article-link;
    font-weight: bold;
    text-decoration: none;
    &:hover {
      color: $article-link-hover;
    }
    code {
      font-weight: normal;
      transition: color .2s;
      position: relative;
      &: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, .35) transparent transparent;
        transition: border .2s;
      }
      &:hover {
        color: $article-code-hover;
        &:after {
          border-color: transparent $article-code-hover transparent transparent;
        }
      }
    }
  }

  img {
    max-width: 100%;
    border-radius: ($border-radius * 1.5);
    box-shadow: 1px 3px 10px $article-shadow;
  }

  //////////////////////////////////// Lists ////////////////////////////////////

  ol, ul {
    padding-left: 1.6rem;
  }

  ul {
    list-style-type: disc;
    li:before{
      content: "" !important;
    }
  }

  ol {
  list-style: none;
  counter-reset: item;
    li {
      position: relative;
      counter-increment: item;
      &:before {
        content: counter(item) ". ";
        position: absolute;
        left: -1.6em;
        color: $article-bold;
        font-weight: bold;
      }
      ul {
        counter-reset: item;
      }
    }
  }

  & > ol,
  & > ul {
    margin: 1rem 0 1.5rem 0;
  }

  li {
    margin: .25rem 0;
  }

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

  code,pre {
    background: $article-code-bg;
    font-family: 'Inconsolata', monospace;
  }

  code {
    padding: .15rem .45rem .25rem;
    border-radius: $border-radius;
    color: $article-code;
  }

  pre {
    margin: 2rem 0 3rem;
    padding: 1.5em;
    border-radius: $border-radius;
    overflow: scroll;
    code { padding: 0; }
  }

  //////////////////////////////////// Tables ////////////////////////////////////

  table {
    margin: 1rem 0 3rem;
    border-spacing: 0;
    color: $article-text;
    max-width: 100%;
    overflow: scroll;
    box-shadow: 1px 3px 10px $article-shadow;
    border-radius: ($border-radius * 1.5);

    th, td {
      padding: .85rem 1.25rem;
    }
    thead {
      background: linear-gradient(to right, $article-table-header-left, $article-table-header-right);
      background-attachment: fixed;
    }

    th  {
      color: $g20-white;
      &:first-child {
        border-radius: ($border-radius * 1.5) 0 0 0;
      }
      &:last-child {
        border-radius: 0 ($border-radius * 1.5) 0 0;
      }
    }

    td {
      font-size: .95rem;
      line-height: 1.5em;
    }

    tr{
      &:nth-child(even) {
        background: $article-table-row-alt;
      }
      &:last-child {
        td {
          &:first-child { border-radius: 0 0 0 ($border-radius * 1.5); }
          &:last-child { border-radius: 0 0 ($border-radius * 1.5) 0; }
        }

      }
    }
  }

  ////////////////// Blockquotes, Notes, Warnings, & Messages //////////////////

  blockquote,
  .note,
  .warn,
  #enterprise-msg {
    padding: 1.65rem 2rem .1rem 2rem;
    margin: 1rem 0 2rem;
    border-width: 0 0 0 4px;
    border-style: solid;
    border-radius: 0 $border-radius $border-radius 0;
  }

  blockquote {
    border-color: rgba($article-text, .25);
    p, li {
      font-size: 1.15rem;
      font-style: italic;
      color: rgba($article-text, .5);
    }
  }

  .note {
    border-color: $article-note-base;
    background: rgba($article-note-base, .08);
    h1,h2,h3,h4,h5,h6 {
      color: $article-note-heading;
    }
    p, li {
      color: $article-note-text;
    }
    a {
      color: $article-note-link;
      code:after {
        border-color: transparent rgba($article-note-code, .35) transparent transparent;
      }
      &:hover {
        color: $article-note-link-hover;
        code:after {
          border-color: transparent $article-note-link-hover transparent transparent;
        }
      }
    }
    ol li:before {
      color: $article-note-text;
    }
    code, pre{
      color: $article-note-code;
      background: $article-note-code-bg;
    }
    img {
      box-shadow: 1px 3px 10px $article-note-shadow;
    }
    table{
      color: $article-note-text;
      box-shadow: 1px 3px 10px $article-note-shadow;
      thead{
        background: $article-note-table-header;
      }
      tr:nth-child(even) td {
        background: $article-note-table-row-alt;
      }
    }
    blockquote {
      border-color: rgba($article-note-text, .25);
      p { color: rgba($article-note-text, .6); }
    }
  }

  .warn {
    border-color: $article-warn-base;
    background: rgba($article-warn-base, .08);
    h1,h2,h3,h4,h5,h6 {
      color: $article-warn-heading;
    }
    p, li {
      color: $article-warn-text;
    }
    a {
      color: $article-warn-link;
      code:after {
        border-color: transparent rgba($article-warn-code, .35) transparent transparent;
      }
      &:hover {
        color: $article-warn-link-hover;
        code:after {
          border-color: transparent $article-warn-link-hover transparent transparent;
        }
      }
    }
    ol li:before {
      color: $article-warn-text;
    }
    code, pre{
      color: $article-warn-code;
      background: $article-warn-code-bg;
    }
    img {
      box-shadow: 1px 3px 10px $article-warn-shadow;
    }
    table{
      color: $article-warn-text;
      box-shadow: 1px 3px 10px $article-warn-shadow;
      thead{
        background: $article-warn-table-header;
      }
      tr:nth-child(even) td {
        background: $article-warn-table-row-alt;
      }
    }
    blockquote {
      border-color: rgba($article-warn-text, .25);
      p { color: rgba($article-warn-text, .6); }
    }
  }

  ///////////////////////////////// Enterprise /////////////////////////////////
  #enterprise-msg {
    border-color: $article-enterprise-base;
    background: rgba($article-enterprise-base, .15);
    font-style: italic;
    display: flex;
    p {
      color: $article-enterprise-text;
    }
    a {
      color: $article-enterprise-link;
      &:hover {
        color: $article-enterprise-link-hover;
      }
    }
    div:first-child { margin-right: 1.25rem; }
  }

  .enterprise-flag {
    padding: .2rem .4rem;
    background: $article-enterprise-base;
    font-size: .75rem;
    font-style: normal;
    font-weight: bold;
    color: $g20-white;
    border-radius: $border-radius;
    vertical-align: text-bottom;
    &:before {
      content: "E";
    }
  }

  .enterprise {
    position: relative;
    padding: 0 0 .01rem 2rem;
    margin-left: -2rem;
    border-left: 2px solid $article-enterprise-base;

    .enterprise-flag {
      position: absolute;
      top: -.15rem;
      left: -.68rem;
      transform: scale(.8);
      transition: all .2s;
      &:hover {
        transform: scale(1);
        color: $g20-white;
      }
    }
  }

  /////////////////////////////// Tabbed Content ///////////////////////////////

  .tabs-wrapper{
    margin: 2rem 0 .5rem;
  }
  .tabs p {
    display: flex;
    flex-wrap: wrap;
  }
  .tabs a {
    flex-grow: 1;
    margin: 2px;
    font-size: 0.875rem;
    color: $article-tab-text;
    padding: .35rem .75rem;
    display: inline-block;
    text-align: center;
    border-radius: $border-radius;
    background-color: $article-tab-bg;
    transition: background-color .2s, color .2s;

    &:hover {
      color: $article-tab-active-text;
      background: $article-tab-active-bg;
    }
    &.is-active {
      color: $article-tab-active-text;
      background: $article-tab-active-bg;
    }
  }

  .tab-content {
    padding: 1.5rem 0;
    width: 100%;

    & > * {
      width: 100% !important;
      margin-left: 0 !important;
    }
  }

  .tab-content:not(:first-of-type) {
    display: none;
  }

  .tabs-wrapper.code {
    .tabs {
       p {
         margin: 0;
         text-align: right;
         display: block;
       }
       a {
         margin: 0;
         border-radius: $border-radius $border-radius 0 0;
         display: inline-block;
         background: $article-tab-code-bg;
         color: $article-tab-code-text;
         &:hover {
           background: $article-tab-code-bg-hover;
           color: $article-tab-code-text-hover;
         }
         &.is-active {
           background-color: $article-code-bg;
           color: $article-tab-code-active-text;
         }
       }
    }
    .tab-content {
      padding: 0;
      pre {
        margin: 0 0 3rem;
        border-radius: $border-radius 0 $border-radius $border-radius;
      }
    }
  }

}