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

  &__radio-full{
    @include medium-12;
  }

  &__radio-half{
    @include medium-6;

    &:nth-of-type(2){
      .comparison-radios__ribbon{ //only display the ribbon for the first radio
        display: none;
      }
    }
  }

  &__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{
    .comparison-radios__input + label{
      @include breakpoint(small only){
        overflow: hidden;
        padding: 0;
      }

      @include breakpoint(medium){
        padding: 0 0 46px 0;
      }

      &::before{
        @include breakpoint(medium){
          top: 100%;
          margin-top: -35px;
          left: 50%;
          margin-left: -12px;
        }

        @include breakpoint(small only){
          top: 50%;
          left: 91%;
          margin-top: -12px;
          margin-left: -2px;
        }
      }

      &::after{
        @include breakpoint(medium){
          top: 100%;
          margin-top: -27px;
          left: 50%;
          margin-left: -4px;
          display: none;
        }

        @include breakpoint(small only){
          top: 50%;
          left: 91%;
          margin-top: -4px;
          margin-left: 6px;
        }
      }
    }

    input[type="radio"]:checked + label{
      @include breakpoint(medium){
        padding: 0 0 46px 0;
      }

      &::after{
        @include breakpoint(medium){
          top: 100%;
          margin-top: -27px;
          left: 50%;
          margin-left: -4px;
        }

        @include breakpoint(small only){
          top: 50%;
          left: 91%;
          margin-top: -4px;
          margin-left: 6px;
        }
      }
    }
  }

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

    @include breakpoint(small only){
      font-size: $base-font-size*1.25;
    }

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

    &--mobile-split{
      @include breakpoint(small only){
        float: left;
        width: 25%;
        margin-bottom: 0;
      }
    }
  }

  &__title-content{
    @include breakpoint(small only){
      -webkit-transform: translate(-50%, -50%);
      @include absolute-center;
      font-size: 4.5vw;
    }
  }

  &__label{
    display: inline-block;
    width: 85%;
    margin: 9px auto;
  }

  &__input:checked{
    &~label{
      .comparison-radios__panel{
        border-bottom: 2px solid darken($sky, 10%);
        background: darken($sky, 3%);

        @include breakpoint(medium){
          border-top: 2px solid darken($sky, 10%);
        }
      }

      .comparison-radios__content{
        @include breakpoint(small only){
          border-left: 2px solid darken($sky, 10%);
          border-right: 2px solid darken($sky, 10%);
        }
      }

      .comparison-radios__divider{
        border: solid darken($sky, 10%);
        border-width: 2px 0 0;
        height: 0;
      }
    }
  }

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

    @include breakpoint(medium){
      border-top: 2px solid $stone;
    }
  }

  &__content{
    @include breakpoint(small only){
      width: 63%;
      float: left;
      border-right: 2px solid $stone;
      border-left: 2px solid $stone;
    }
  }

  &__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;

    @include breakpoint(small only){
      display: none;
    }
  }

  &__list{
    list-style-type: none;
    padding: 0 $base-padding;

    @include breakpoint(small only){
      padding: 0 $base-padding/3;
      font-size: $base-font-size*0.875;
    }
  }

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

    &::before{
      font-family: 'FontAwesome';
      content: "\f00c";
      color: $brand-blue-light;
      margin-right: 5px;
      margin-left: -17px;
    }

    @include breakpoint(small only){
      text-align: left;
      margin-left: $base-margin*1.5;
    }
  }

  &__ribbon{
    position: absolute;
    top: 0;
    right: -18px;

    @include breakpoint(medium down){
      right: -14px;
      width: 100px;
    }

    @include breakpoint(small only){
      top: -5px;
      right: -13px;
    }
  }

  &__icon{
    display: block;

    @include breakpoint(small only){
      -webkit-transform: translate(-50%, -50%);
      @include absolute-center;
      font-size: 10vw;
    }

    &::before{
      @include breakpoint(medium){
        font-size: $base-font-size*3;
      }
    }

    &.ama-icon-rv::before{ //make the custom icon play nice with the FA icons
      position: relative;

      @include breakpoint(medium){
        font-size: $base-font-size*4;
        top: 20px;
        line-height: 9px;
      }

      @include breakpoint(small only){
        font-size: 13vw;
        top: 5px;
      }
    }
  }

  &__divider{
    margin-bottom: 0;
    
    @include breakpoint(small only){
      display: none;
    }
  }

  &--disabled{
    input[type="radio"]:checked + label{
      background-color: lighten($sky, 4%);
      border: 2px solid lighten($dark-sky, 12%);
      color: lighten($stormcloud, 30%);

      &:before{
        border: 2px solid lighten($brand-blue-light, 55%);
      }

      &:after{
        background-color: lighten($brand-blue-light, 55%);
      }
    }

    input [type="radio"] + label{
      border: 2px solid lighten($dark-sky, 6%);
    }


    [type='radio'] + label[for]{
      cursor: not-allowed;
      color: lighten($stormcloud, 30%);
    }
  }
}