.tabs {

  .nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    border-radius: 3px;
    border: 1px solid $gray;
    font-weight: bold;

    @include media-breakpoint-down(sm) {
      flex-direction: column;
    }

    .nav-item {
      margin-bottom: 0;
      flex-grow: 1;
      text-align: center;

      &:hover {
        background: $blue;

        .nav-link {
          color: $white;
        }
      }

      &:last-child .nav-link {
        border: 0;
      }

      .nav-link {
        padding: 9px 0;
        background: none;
        border-width: 0 1px 0 0;
        border-color: $gray;
        border-radius: 0;
        text-decoration: none;
        white-space: nowrap;

        @include media-breakpoint-down(sm) {
          border-width: 0 0 1px;
        }

        &.active {
          background: $gray-light;
          color: $gray-dark;
        }
      }
    }
  }

  .tab-content {
    clear: left;
    padding: 30px 20px;

    h2 {
      margin-bottom: 10px;
    }

    h2:not(:first-child) {
      margin-top: 10px;
    }

    @include media-breakpoint-up(sm) {
      border-bottom: 1px solid $gray;
    }
  }
}

.tab-list-content {
  display: none;

  &.is-active {
    display: block;
    background-color: $gray-bg;
  }
}

.tab-list-terms {
  display: none;

  &.is-active {
    display: block;
  }
}

.tab-list-button {
  color: $blue;
  border-top: 1px solid $gray;
  border-right: 1px solid $gray;
  border-left: 1px solid $gray;
  text-align: center;
  padding: 15px 0;
  font-weight: 700;
  cursor: pointer;

  &.is-active {
    color: $gray-dark;
    background-color: $gray-bg;
    border: 0;
  }
}