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

.tabs-wrapper {
  margin: 2.5rem 0 .5rem;
}

.code-tabs-wrapper {
  margin: 1.5rem 0 .5rem;
}

.tabs, .code-tabs {
  p {
    display: flex;
    flex-wrap: wrap;
  }
  a {
    flex-grow: 1;
    margin: 2px;
    font-size: 0.875rem;
    font-weight: $medium;
    color: $article-tab-text;
    padding: .35rem .75rem;
    display: inline-block;
    text-align: center;
    border-radius: $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, .code-tabs-content {
  margin: .75rem 0 3rem;
  width: 100%;

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

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

.code-tabs-wrapper {
  .code-tabs {
    p {
      margin: 0;
      text-align: right;
      display: block;
    }
    a {
      padding: .1rem .75rem;
      margin: 0;
      border-radius: $radius $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;
      }
    }
  }
  .code-tab-content {
    padding: 0;
    pre {
      margin: 0 0 3rem;
      border-radius: $radius 0 $radius $radius;
    }
  }
}
