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

$upsellGray: #d3d3d3;
$lightGrayTextColor: lighten($gray,15%);
$columnsWidth: percentage(1/3);

#rrUpSell {
  &, *{
    box-sizing: border-box;
  }
  h2 {
    font-size: 24px;
    margin: 5px !important;
    padding: 0 !important;
  }

  h3 {
    padding: 0 0 0 5px;
    margin-bottom: 20px;
  }

  .rr_upsell {
    @include border-radius(4px);
    border: 1px solid $upsellGray !important;

    .rr_upsell_header {
      background: $blue;
      width: 100%;
      color: $white;
      font-weight: $fontWeightLight;
      padding: 18px 0;
      @include font-size($baseFontSize + 10);

      .svg_20x20 {
        fill: $white;
        margin: 0 5px 0 20px;
        padding: 4px 4px 0 4px;
        background: darken($blue, 20%);
        width: auto !important;
        height: auto !important;
        @include border-radius(4px);
        svg {
          width: 15px;
          height: 15px;
          fill: $white;
        }
      }
    }

    .unified_price_block.unified_map_price {
      margin-bottom: 0;
    }

    .rr_upsell_image, .rr_current_sku_image {

      img {
        width: 170px;
      }
    }

    .rr_upsell_description {
      float: left;
      width: 540px;

      .rr_upsell_description_text {
        font-weight: $fontWeightSemiBold;
        line-height: normal;
        @include font-size($baseFontSize + 6);
      }

      .rr_upsell_description_skunr {
        float: left;
        margin: 15px 0 20px 0;
        color: $lightGrayTextColor;
        font-weight: $fontWeightNormal;
      }

      .rr_upsell_price {
        padding: 0 0 20px 0;
        color: $red;
        line-height: normal;
        font-weight: $fontWeightSemiBold;
        @include font-size($baseFontSize + 16);
        sup {
          @include font-size($baseFontSize);
        }
      }

      .rr_upsell_price_uom {
        font-weight: $fontWeightNormal;
        color: $lightGrayTextColor;
        @include font-size($baseFontSize - 2);
      }

      .bvs {
        width: auto;
        float: left;
        margin: 15px 0 0 30px;
      }

      .rr_upsell_clearfix {
        @include clearfix();
      }
    }

    .rr_upsell_table {
      @include clearfix();
    }

    .upsell_row {
      border-bottom: 1px solid $upsellGray;
      display: table;
      width: 100%;
      &.even {
        background: #F4F5F7;
      }

      .upsell_no_bg, &.upsell_no_bg {
        background: none !important;
        border-bottom: none;
      }

      .upsell_col {
        display: table-cell;
        width: $columnsWidth;
        vertical-align: top;
        @include font-size($baseFontSize - 3);

        &.fixed_height {
          height: 58px;
        }

        &.upsell_current_data {
          background: rgba(51, 121, 194, 0.1);

          &.first_col {
            font-weight: $fontWeightSemiBold;
            width: 370px;
            text-align: right;
            display: table;

            &.adjust-one-upsell-width {
              width: 472px;
            }

            .box_pad {
              padding-right: 10px;
              text-align: left;
              display: table-cell;
              vertical-align: middle;
            }
          }

          .attrib_name {
            text-transform: capitalize;
            width: 220px;
            display: table-cell;
            vertical-align: middle;
          }
        }

        &.img_container {
          float: none;
          margin: 0 auto;
        }

        &.upsell_new_data {
          border-left: 1px solid $upsellGray;
        }

        .upsell_heading {
          text-align: center;
          margin-bottom: 20px;
          font-weight: $fontWeightSemiBold;
          @include font-size($baseFontSize - 2);
        }

        .center {
          position: relative;
          line-height: 0;
          font-size: 0;
        }

        a {
          display: table-cell;
          vertical-align: middle;
          color: $black;
          text-decoration: none;
          padding: $commonPadding + 5;
          @include clearfix();

          &.brandColor {
            color: $red;
          }

          &.upsell_sku.btn {
            color: $white;
            width: 150px;
            line-height: 15px;
            margin: 10px;
          }
        }
      }

      .sku_description {
        font-weight: $fontWeightSemiBold;
        min-height: 60px;
        height: 100px;
      }

      .hover_effect {
        @include opacity(.7);
      }

      .upsell_bg_white {
        background: $white !important;
      }
    }

    li {
      width: 192px;
      float: left;

      .upsell_img_container {
        margin: 0 auto;
        width: 170px;
      }

      &.slider_container {
        position: relative;
        width: 576px;

        &.adjust-one-upsell-width {
          width: 472px;
        }

        .img_container {
          padding-top: 42px;
        }

        .bx-controls {

          .bx-prev {
            left: 5px
          }

          .bx-next {
            right: 5px;
          }
        }

        .bx-wrapper {
          height: 192px;
        }

        .adjust-one-upsell-width {
          width: 472px;
        }

        .adjust-two-upsell-width {
          width: 288px;
        }
      }

      &.first_col {
        width: 370px;

        &.adjust-one-upsell-width {
          width: 472px;
        }
      }

      &.attribute_names {
        padding-top: 230px;
      }

      .upsell_row {
        //height: 60px;
      }

      .upsellAddToCart {
        text-align: center;
        margin-top: 12px;
        margin-bottom: 12px;
      }
        
      .upsell_new_attr {
        height: 60px;
      }
    }
  }
      
  .rr_upsell {

    &.single_sku {

      .upsell_row .upsell_col {
        &.fixed_height {
          height: 58px;
        }
      }

      .first_col .box_pad {
        font-weight: $fontWeightSemiBold;
      }

      .upsell_current_data {
        border-left: 1px solid $upsellGray;
      }

      p.btn {
        width: 272px;
      }

    }

    &.multi {
      width: 946px;
      .upsell_row {
        height: 80px;
        width: 100%;
        overflow: hidden;

        .sku_description {
          height: 80px;
        }

        .upsell_col .upsellSkuInfo a {
          display: block;
        }

        .upsell_col{
          display: table;
          width: 100%;
          a {
            display: table-cell;
            vertical-align: middle;
            color: #111;
            text-decoration: none;
            padding: 9px;
          }
        }

        .first_col{
          width: 314px;
        }

        .first_col .upsell_col.img_container {
          width: 270px
        }

        .upsell_col.img_container {
          height: 310px;
          width: 100%;
          margin: 0 auto;
        }

        .upsell_col.upsell_current_data {

          .attrib_name {
            width: 135px;
          }

          &.first_col {
            width: 315px;
            height: 80px;

            &.adjust-one-upsell-width {
              width: 472px;

              .box_pad:last-child{
                padding-left: 150px;
              }
            }
          }
        }
      }

      .upsell_img_container {
        width: 250px;
      }

      li {

        .upsell_row {
          height: 80px;
          overflow: hidden;
        }

        &.first_col {
          width: 315px;

          &.adjust-one-upsell-width {
            width: 472px;
          }
        }

        .upsellAddToCart {
          margin-left: 32px;
          margin-right: 32px;

          > .btn {
            width: 100%;
            line-height: 45px;
          }
        }

        &.slider_container {
          position: relative;
          width: 630px;

          &.adjust-one-upsell-width {
            width: 472px;
          }

          .img_container {
            padding-top: 40px;
          }

          .bx-controls {

            .bx-prev {
              left: 5px
            }

            .bx-next {
              right: 5px;
            }
          }

          .bx-wrapper {
            height: 192px;
          }

          .adjust-one-upsell {
            &.width {
              width: 472px;
            }

            &-item-width {
              width: 100%;
            }

            &-btn-width {
              width: 60%;
            }
          }

          .adjust-two-upsell {
            &-width {
              width: 288px;
            }

            &-item-width {
              width: 50%;
            }
          }

          .upsell_new_attr {
            padding-left: 10px;
            height: 80px;
          }

          &.attribute_names {
            padding-top: 230px;
          }
        }
      }

      .unified_price_block.unified_map_price {
        width: 114px;
      }
    }
  }
}