.pricing-table {
  margin: 40px 0 80px 0;
  overflow: hidden;
  width: 100%;

  @include media-breakpoint-up(md) {
    margin: 96px 0;
  }

  @include media-breakpoint-up(lg) {
    margin: 144px 0 96px 0;
  }

  &__group-toggle {
    background-color: transparent;
    border: 1px solid $blue-mid;
    border-radius: 63px;
    color: $blue;
    font-size: $font-size-sm;
    font-weight: $font-weight-normal;
    padding: 8px 16px;
    text-align: center;
    transition: $btn-transition;
    width: 100%;

    @include media-breakpoint-up(md) {
      width: auto;
    }

    &:hover, &:focus {
      background-color: $blue-card;
      border-color: $blue-mid;
      color: $blue;
    }

    &.active {
      background-color: $blue;
      border-color: $blue;
      color: $white;
    }
  }

  &__cta {
    background-color: $blue-card;
    padding: 16px;

    @include media-breakpoint-up(md) {
      padding: 24px;
    }
  }

  &__table-wrapper {
    overflow: auto;
  }

  &__table {
    border: 1px solid #F5F5F5;
    border-collapse: collapse;
    color: $blue;
    font-size: $font-size-sm;
    width: auto;

    @include media-breakpoint-up(lg) {
      width: 100%;
    }

    th, td {
      border: 1px solid #DFDFE4;
      padding: 22px 12px;
      min-width: 224px;
      width: 224px;

      @include media-breakpoint-up(lg) {
        min-width: auto;
        width: auto;
      }
    }

    th {
      background-color: #F5F5F5;
      font-family: $headings-font-family;
      font-size: 1.25rem; // 20px
      font-weight: $font-weight-bold;
      letter-spacing: -0.4px;
      text-transform: uppercase;
    }

    tr {
      background-color: #FCFCFC;

      &:nth-child(even) {
        background-color: $white;
      }
    }
  }

  &__content {
    font-size: $font-size-lg;
  }

  &__notes {
    max-width: 691px;
  }
}