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

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

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

    &:after {
      content: "";
      position: absolute;
      display: block;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      border-radius: $radius;
      @include gradient($grad-blue);
      opacity: 0;
      transition: opacity .2s;
      z-index: -1;
    }

    &:hover {
      color: $article-tab-active-text;
      &:after {
        opacity: 1;
      }
    }
    &.is-active {
      color: $article-tab-active-text;
      &:after {
        opacity: 1;
        @include gradient($grad-blue)
      }
    }
  }
}

.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;
    font-size: 0.875rem;
    background: $article-bg;
    color: rgba($article-tab-code-text, .5);
    &:hover {
     color: $article-tab-code-text;
    }
    &.is-active {
     background-color: $article-code-bg;
     color: $article-tab-code-text;
    }
  }
}

.code-tab-content {
  padding: 0;
  pre {
    margin: 0 0 3rem;
    border-radius: $radius 0 $radius $radius;
  }
}

.tab-content, .code-tabs-content {
  margin: .75rem 0 3rem;
  width: 100%;

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

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