.comparison-radios{
  &__wrapper{
    @include grid-row-nest;
    @include clearfix;
    margin-bottom: $base-margin;
  }

  &__radio-half{
    @include medium-6;
  }

  &__radio-third{
    @include medium-4;

    &:nth-of-type(1),
    &:nth-of-type(3){
      .comparison-radios__ribbon{ //only display the ribbon for the middle radio
        display: none;
      }
    }
  }

  &--vertical{
    text-align: center;
  }

  &__radio-btn--centered{
    padding: 0 0 21px 0;

    &:before{
      top: 100%;
      margin-top: -35px;
      left: 50%;
      margin-left: -12px;
    }

    &:after{
      top: 100%;
      margin-top: -27px;
      left: 50%;
      margin-left: -4px;
    }
  }

  &__title{
    font-size: $base-font-size*1.45;
    padding: 7px;
    font-weight: 700;

    &--blue-bg{
      @extend .comparison-radios__title;
      background: $brand-blue-light;
      color: $white;
      margin-bottom: $base-margin;
    }
  }

  &__panel{
    background-color: $ash;
    border-top: 2px solid $stone;
    border-bottom: 2px solid $stone;
    padding: $base-padding;
    margin-bottom: $base-margin;
  }

  &__highlight{
    font-weight: 700;
    line-height: 1.5rem;

    &--large{
      @extend .comparison-radios__highlight;
      font-size: 2rem;
    }

    &--medium{
      @extend .comparison-radios__highlight;
      font-size: 1.25rem;
    }

    &--blue{
      @extend .comparison-radios__highlight;
      color: $brand-blue-light;
    }
  }

  &__image{
    height: 125px;
    margin-bottom: $base-margin;
  }

  &__list{
    list-style-type: none;
  }

  &__list-item{
    padding-bottom: $base-padding;
  }

  &__ribbon{
    position: absolute;
    top: 0;
    right: 0;
  }
}

input[type="radio"]:checked{
  &~label{
    .comparison-radios__panel{
      border-top: 2px solid darken($sky, 10%);
      border-bottom: 2px solid darken($sky, 10%);
    }
  }
}