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

// Default Styles
.od_promo_content {
  @include display-flex;
  clear: both;

  .od_promo_offer {
    width: 46.5%;
    margin: 1% 0.5%;
    padding: 1%;
    float: left;
    border: 1px dashed $borderGray;
    position: relative;
    box-sizing: border-box;
    flex-grow: 1;

    &:after {
      content: '';
      position: absolute;
      width: 20px;
      height: 20px;
      bottom: -13px;
      right: -6px;
      background: $white url(https://media.officedepot.com/assets/grey_scissors.svg) no-repeat;
    }

    .promo_offer_img {
      width: 25%;
      float: left;
      img {
        margin: 0 auto;
        display: block;
        width: 100%;
        max-width: 120px;
        height: auto;
      }

      .promo_offer_qrimg {
        display: none;
      }
    }

    .promo_offer_details_container {
      width: 73%;
      padding-left: 2%;
      float: left;

      .promo_offer_title {
        color: $red;
        @include font-size(18px);
        font-weight: bold;
        padding-bottom: 6px;
      }
      .promo_offer_guidlines {
        @include font-size(12px);
      }
      .promo_offer_code {
        @include font-size(14px);
        padding: 6px 0;
        .promo_offer_cpn_code {
          color: $red;
        }
        a.btn {
          margin-top: 6px;
        }
      }
    }

    &.single_offer .promo_offer_details_container .promo_offer_title {
      @include font-size(20px);
    }
  }
  .coupon_buttons_container {
    padding: 5px 0;
  }

  .btn {
    height: initial;
  }
}

//SVG fallback
body.no_svg .od_promo_content .od_promo_offer:after {
  right: -10px;
  background: $white url(https://media.officedepot.com/image/upload/v1586891927/assets/grey_scissors.png) no-repeat;
}

//desktop override
@media (min-width: 998px) {
  .od_promo_content .od_promo_offer.single_offer {
    .promo_offer_img {
      width: 15%;
    }

    .promo_offer_details_container {
      width: 80%;

      .promo_offer_title {
        @include font-size(20px);
      }
    }
  }
}

//Mobile & Tablet Override Styles
@media (max-width: 997px){
  .od_promo_content {
    display: block;
    padding: 0 12px;

    .od_promo_offer {
      width: 100%;
      padding: 2.5%;
      margin: 10px auto;
      float: none;
      display: table;

      .promo_offer_img {
        width: 30%;
      }

      .promo_offer_details_container {
        width: 65%;
        padding-left: 4%;
        .promo_offer_guidlines,
        .promo_offer_code {
          @include font-size(12px);
          line-height: 16px;
        }
      }
    }
  }
}

//tablet override
@media (min-width: 768px) and (max-width: 997px){
  .od_promo_content .od_promo_offer {
    .promo_offer_img {
      width: 15%;
    }

    .promo_offer_details_container {
      width: 80%;
    }
  }
}

//mobile override
@media (max-width: 767px){

  .od_promo_content .od_promo_offer.single_offer .promo_offer_details_container .promo_offer_title {
    @include font-size(18px);
  }

  .od_promo_content .promo_offer_code .btn {
    display: block;
  }
}