/////////////////////////////// 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: 1rem;
    font-weight: $medium;
    padding: .65rem 1.25rem;
    display: inline-block;
    white-space: nowrap;
    text-align: center;
    color: $article-tab-text !important;
    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($article-btn-gradient);
      opacity: 0;
      transition: opacity .2s;
      z-index: -1;
    }

    &:hover {
      color: $article-tab-active-text !important;
      &:after {
        opacity: 1;
      }
    }
    &.is-active {
      color: $article-tab-active-text !important;
      &:after {
        opacity: 1;
        @include gradient($article-btn-gradient)
      }
    }
  }
  &.small {
    p { justify-content: flex-start; }
    a {
      flex-grow: unset;
      padding: .35rem 1rem;
    }

    .tab-view-output {
      padding: .5rem .5rem 0;
      font-size: .9rem;
      opacity: .65;
      font-style: italic;
      transition: opacity .2s;

      &:before {
        content: "\e97a";
        margin-right: 0.25em;
        font-family: 'icomoon-v3';
        font-style: normal;
      }
    }

    a.is-active + .tab-view-output {
      opacity: 0;
    }
  }
  &.medium {
    p { justify-content: flex-start; }
    a { flex-grow: unset; }
  }
  // Style suggested for tabs that have uneven button widths because of wrapping.
  &.even-wrap a {
    flex-basis: 25%;
  }
}

.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: 1rem;
    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%;

  & > :not(table, .fs-diagram, img) {
    width: 100%;
    margin-left: 0;
  }

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

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