@import '/css/master/settings/settings';

/****************
Payment Info / Preferences
*****************/
$lightBlue: lighten($blue, 45%);
$lightGreen: lighten($green, 50%);
$lightRed: lighten($red, 50%);

#paymentInfoPage {

}
#preferredPaymentModule {
  $opacityTransition: opacity .2s linear;

  ul {
    //Make the list width 100% width of box (no pad) so that green success spans entire module for radio button section
    position: relative;
    right: 16px;
    width: 312px;
  }

  li {
    height: 41px;
    padding-left: 16px;

    &.success {
      background-color: $lightGreen;

      -webkit-transition: background-color .2s;
      transition: background-color .2s;
    }

    &.error {
      background-color: $lightRed;

      -webkit-transition: background-color .2s;
      transition: background-color .2s;
    }
  }

  .svg_fill_green,
  .svg_fill_red {
    opacity: 0;
    position: relative;
    right: 279px;
    width: 24px;

    -webkit-transition: $opacityTransition;
    transition: $opacityTransition;

    &.show {
      opacity: 1;

      -webkit-transition: $opacityTransition;
      transition: $opacityTransition;
    }
  }

  .styled_radio_label {
    opacity: 1;
    -webkit-transition: $opacityTransition;
    transition: $opacityTransition;

    &.no_show {
      opacity: 0;
      -webkit-transition: $opacityTransition;
      transition: $opacityTransition;
    }
  }

  .paypal_logo_img {
    position: relative;
    top: 6px;
  }
}

.blue_bg {
  background-color: $lightBlue;

  img:first-of-type {
    float: left;
    margin-right: 12px;
  }
  p:first-of-type {
    min-width: 180px;
  }
}

/* Credit card labels in payment section */
.cc_logo {
  background: url('/images/common/creditcard/accepted-ccs.png') 100px no-repeat;
  height: 34px;
  width: 60px;

  &.vs {
    background-position: 0 0;
  }
  &.mc {
    background-position: -78px 0;
  }
  &.am {
    background-position: -144px 0;
  }
  &.ds {
    background-position: -203px 0;
  }
  &.sr {
    background-position: -278px 0;
  }
  &.unknown {
    background-position: -347px 0;
  }
}

.info.icon {
  background: transparent url(/images/common/info-blue2.png) no-repeat 0 0;
  display: inline-block;
  height: 18px;
  width: 18px;
}