// @page Pattern Library/Components
// @name Comp table row
//
// @description
//   The `.us-ct__row` appears in the comparison tables, and contains a single product.
//
// @state .us-ct-row--details-toggle - Used for a thicker bottom border when the toggle is showing.
//
// @markup
//   <div class="us-ct-row {$modifiers}">
//     <div class="us-ct-row__title">
//       <p class="us-ct-row__title-text">aqua Reward With Cashback</p>
//       <div class="us-usp us-usp--orange">£20 Amazon voucher</div>
//       <div class="us-usp us-usp--green">Cashback</div>
//     </div>
//     <div class="us-ct-row__product">
//       <div class="us-ct-row__col us-ct-row__col--image">
//         <img src="https://uswitch-cms.imgix.net/uswitch-assets-eu/banking/credit-cards/cards/aqua-2017-large.png?w=170&h=107&fit=auto&bg=0fff&fm=png8" class="us-ct-row__image" />
//         <div class="us-ct-row__title--mobile"><strong>aqua Reward With Cashback</strong></div>
//         <div class="us-ct-row__usp--mobile">
//           <div class="us-usp us-usp--orange">£20 Amazon voucher</div>
//           <div class="us-usp us-usp--green">Cashback</div>
//         </div>
//       </div>
//       <div class="us-ct-row__col us-ct-row__col--stretch">
//         <div class="us-ct-row__name"><strong>34.9% APR</strong></div><div class="us-ct-row__value">Representative (variable)</div>
//       </div>
//       <div class="us-ct-row__col us-ct-row__col--stretch">
//         <div class="us-ct-row__name"><strong>£250</strong></div><div class="us-ct-row__value">Minimum credit limit</div>
//       </div>
//       <div class="us-ct-row__col us-ct-row__col--stretch">
//         <div class="us-ct-row__name"><strong>£1250</strong></div><div class="us-ct-row__value">Maximum credit limit</div>
//       </div>
//       <div class="us-ct-row__col us-ct-row__col--apply">
//         <a class="us-btn us-btn--primary us-btn--blocked" href="#" role="button">Apply</a>
//         <a href="#" class="us-ct-row__more-info">More info</a>
//       </div>
//     </div>
//     <span class="us-ct-row__rep-ex">Representative example: When you spend £1,200 at a rate of 34.91% (variable) per annum, your representative APR is 34.9% APR (variable)</span>
//     <div class="us-ct-row__key-details">
//       <button class="us-ct-row__key-details-toggle us-ct-row__key-details-toggle-open">View key details <svg role="presentation" class="us-ct-row__key-details-chevron"><use xlink:href="/images/icons.svg#icon-chevron-right"></use></svg></button>
//       <div class="us-ct-row__key-details-info">
//         <div class="us-ct-row__key-details-col">
//           <strong>Card details</strong>
//           <ul class="us-ct-row__key-details-ul">
//             <li>£20 Amazon gift certificate exclusively through uSwitch (terms apply)</li>
//             <li>0.5% cashback and no foreign transaction fees</li>
//             <li>Credit limit increase possible after four months</li>
//           </ul>
//         </div>
//         <div class="us-ct-row__key-details-col">
//           <strong>To get this card you must at least:</strong>
//           <ul class="us-ct-row__criteria us-ct-row__key-details-ul">
//             <li class="us-ct-row__criteria-li"><svg role="presentation" class="us-icon us-icon--small us-icon--tick us-ct-row__criteria-tick"><use xlink:href="/images/icons.svg#icon-tick"></use></svg>be 18 or older</li>
//             <li class="us-ct-row__criteria-li"><svg role="presentation" class="us-icon us-icon--small us-icon--tick us-ct-row__criteria-tick"><use xlink:href="/images/icons.svg#icon-tick"></use></svg>have a permanent UK address</li>
//             <li class="us-ct-row__criteria-li"><svg role="presentation" class="us-icon us-icon--small us-icon--tick us-ct-row__criteria-tick"><use xlink:href="/images/icons.svg#icon-tick"></use></svg>have a UK current bank or building society account</li>
//             <li class="us-ct-row__criteria-li"><svg role="presentation" class="us-icon us-icon--small us-icon--tick us-ct-row__criteria-tick"><use xlink:href="/images/icons.svg#icon-tick"></use></svg>not be registered bankrupt in past 18 months or have proceedings</li>
//             <li class="us-ct-row__criteria-li"><svg role="presentation" class="us-icon us-icon--small us-icon--tick us-ct-row__criteria-tick"><use xlink:href="/images/icons.svg#icon-tick"></use></svg>have no CCJs (past 12 months)</li>
//           </ul>
//           <p class="us-ct-row__criteria-additional">Additional criteria for acceptance from the lender may apply.</p>
//         </div>
//       </div>
//     </div>
//   </div>

.us-ct-row {
  position: relative;
  display: block;
  margin-bottom: 15px;
  color: $c-uswitch-navy;
  background: #fff;
  border: 1px solid $c-grey;

  &:hover {
    cursor: pointer;
  }

  &__title {
    display: none;
    width: 100%;
    padding: $gutter-width / 2;
    border-bottom: 1px solid $c-grey;

    @include respond-to(desktop) {
      display: flex;
    }

    .us-usp {
      margin-right: 8px;
    }
  }

  &__title-text {
    margin: 0 15px 0 0;
    font-weight: bold;
  }

  &__product {
    position: relative;
    margin: 15px 0;

    @include respond-to(desktop) {
      display: flex;
      border-bottom: 1px solid $c-grey;
    }
  }

  &__image {
    max-width: 150px;

    @include respond-to(desktop) {
      max-width: 100%;
      min-width: 100%;
    }
  }

  &__title--mobile {
    margin-top: 10px;
    font-size: 18px;

    @include respond-to(tablet) {
      font-size: 24px;
    }
  }

  &__usp--mobile {
    display: flex;
    margin: 15px 0 10px 0;

    .us-usp {
      margin-right: 8px;
    }
  }

  &__title--mobile,
  &__usp--mobile {
    @include respond-to(desktop) {
      display: none;
    }
  }

  &__col {
    padding: 6px $gutter-width / 2;

    @include respond-to(desktop) {
      border-top: 0;
    }

    &--stretch {
      display: flex;
      align-self: stretch;
      justify-content: space-between;
      flex-direction: row-reverse;

      @include respond-to(desktop) {
        display: block;
        flex: 1 1;
        padding: 15px 0 15px 15px;
      }
    }

    &--apply {
      position: absolute;
      top: 0;
      right: 0;
      border-top: 0;
      width: calc(100% - 165px);
      max-width: 200px;
      text-align: center;

      @include respond-to(tablet) {
        max-width: 250px;
      }

      @include respond-to(desktop) {
        border-right: 0;
        position: relative;
        flex: 0 0 160px;
      }
    }

    &--image {
      border-top: 0;

      @include respond-to(desktop) {
        flex: 0 0 150px;
      }

      img {
        @include respond-to(desktop) {
          width: 120px;
          height: auto;
        }
      }
    }
  }

  &__more-info {
    display: inline-block;
    margin-top: 10px;
    color: $c-typecyan;
    text-decoration: underline;
    white-space: nowrap;
    cursor: pointer;
  }

  &__rep-ex {
    display: block;
    font-size: 16px;
    border-bottom: 1px solid $c-grey;
    padding: 15px;
    font-weight: bold;
    width: 100%;
  }

  &__key-details-toggle {
    display: block;
    width: 100%;
    padding: 10px;
    font-size: 16px;
    font-weight: 500;
    text-decoration: underline;
    text-align: center;
    cursor: pointer;
    background: none;
    border: 0;
    outline: 0;
  }

  &__key-details-chevron {
    width: 20px;
    height: 20px;
    padding: 3px;
    margin-left: 4px;
    transform: translateY(5px) rotate(90deg);
    stroke-width: 10px;
    transform-origin: center;

    .us-ct-row__key-details-toggle-open & {
      transform: translateY(5px) rotate(-90deg);
    }
  }

  &__key-details-info {
    padding: 0 15px;
    margin-top: 20px;
    justify-content: space-evenly;

    @include respond-to(desktop) {
      display: flex;
    }
  }

  &__key-details-col {
    flex: 1 1;
    font-size: 18px;
    margin: 10px 0;

    @include respond-to(desktop) {
      margin-right: 20px;
    }
  }

  &__key-details-ul {
    font-size: 16px;
    padding-left: 20px;
  }

  &__criteria {
    padding: 0;
    list-style-type: none;
  }

  &__criteria-li {
    position: relative;
    padding-left: 30px;
  }

  &__criteria-tick {
    position: absolute;
    top: 4px;
    left: 0;
  }

  &__criteria-additional {
    font-size: 14px;
    color: $c-darker-grey;
    margin-top: 10px;
  }

  &__name {
    width: 33%;
    font-size: 16px;

    @include respond-to(desktop) {
      width: 100%;
      font-size: 24px;
    }
  }

  &__value {
    color: $c-dark-grey;
    font-size: 14px;
    line-height: 1.4em;
  }

  &__eligibility {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding: 0 0 10px 0;
  }

  &__eligibility-score {
    font-weight: 700;
  }

  &__eligibility-link {
    white-space: nowrap;
    cursor: pointer;
    color: #008fe9;
    border-bottom: 1px solid #008fe9;
  }

  &__eligibility-progress {
    height: 15px;
    width: 100%;
    background: #e9ebed;
    margin: 0 0 5px 0;
    position: relative;
  }

  &__eligibility-bar {
    height: inherit;
    position: absolute;
    top: 0;
    left: 0;
  }
}