//overwrite this - start

//@widget_content_bg_color: aquamarine;
@widget_content_bg_color: rgba(255, 0, 0, 0);
//@widget_close_btn_bg_color: blueviolet;
@widget_close_btn_bg_color: rgba(255, 0, 0, 0);

@wrap_img: url(../../images/ai/widget_popup_sale/widget_sale_black-friday23.svg);
@wrap_width: 207px;
@wrap_height: 132px;
@wrap_bottom: 0;
@wrap_left: -265px;
@widget_content_width: 150px;
@widget_content_height: 90px;
@widget_content_bottom: 35px;
@widget_content_left: -170px;
@widget_content_border-radius:  0 40px 40px 0;
@widget_close_btn_left: 130px;
@widget_close_btn_bottom: 95px;
@widget_close_btn_width: 30px;
@widget_close_btn_height: 30px;

@wrap_img_mobile: url(../../images/ai/widget_popup_sale/widget_sale_black-friday23_mobile.svg);
@wrap_width_mobile: 112px;
@wrap_height_mobile: 71px;
@wrap_bottom_mobile: 15px;
@wrap_left_mobile: -195px;
@wrap_left_in_mobile: -5px;
@widget_content_width_mobile: 95px;
@widget_content_height_mobile: 70px;
@widget_content_bottom_mobile: 15px;
@widget_close_btn_left_mobile: 83px;
@widget_close_btn_bottom_mobile: 62px;
@widget_close_btn_width_mobile: 20px;
@widget_close_btn_height_mobile: 20px;


@wrap_img_short: url(../../images/ai/widget_popup_sale/widget_sale_black-friday23_short.svg);
@wrap_short-img_bg_size: 85%;
@wrap_width_short: 135px;
@wrap_height_short: 130px;
@wrap_bottom_short: -20px;
@wrap_left_short: -5px;
@widget_content_width_short: 100px;
@widget_content_height_short: 97px;
@widget_content_bottom_short: 50px;
@widget_content_left_short: 0px;

@wrap_img_short_mobile: @wrap_img_short;
@wrap_short-img_bg_size_mobile: 70%;
@wrap_width_short_mobile: @wrap_width_short;
@wrap_height_short_mobile: @wrap_height_short;
@wrap_bottom_short_mobile: @wrap_bottom_short;
@wrap_left_short_mobile: @wrap_left_short;
@widget_content_width_short_mobile: 80px;
@widget_content_height_short_mobile: 80px;
@widget_content_bottom_short_mobile: 25px;
@widget_content_left_short_mobile: 0px;

//overwrite this - end

.sale-btn-wrap{
  position: fixed;
  left: @wrap_left; //полностью скрыт
  bottom: @wrap_bottom;
  height: @wrap_height;
  width: @wrap_width;
  background: @wrap_img;
  background-repeat: no-repeat;
  background-size: 80%;
  padding: 0;
  display: block;
  z-index: 99;
  transition: .2s ease-in-out left,.2s ease-in-out right;
  &.in{
    left: 0;
  }
  .widget_content {
    cursor: pointer;
    display: block;
    position: fixed;
    left: @widget_content_left;
    height: @widget_content_height;
    width: @widget_content_width;
    bottom: @widget_content_bottom;
    border-radius: @widget_content_border-radius;
    background-color: @widget_content_bg_color;
    z-index: 99;
    &.in{
      left: 0;
    }
  }
  .widget_close_btn {
    cursor: pointer;
    display: none;
    position: fixed;
    padding: 0;
    left: @widget_close_btn_left;
    bottom: @widget_close_btn_bottom;
    border-radius: 50%;
    background-color: @widget_close_btn_bg_color;
    width: @widget_close_btn_width;
    height: @widget_close_btn_height;
    z-index: 100;
    &.in{
      display: block;
    }
  }

  &.shot-img{
    background: @wrap_img_short;
    background-repeat: no-repeat;
    background-size: @wrap_short-img_bg_size;
    height: @wrap_height_short;
    width: @wrap_width_short;
    bottom: @wrap_bottom_short;
    left: @wrap_left_short;
    .widget_content {
      padding: 0;
      height: @widget_content_height_short;
      width: @widget_content_width_short;
      bottom: @widget_content_bottom_short;
      left: @widget_content_left_short;
    }
  }
}
@media (max-width: 767px) {
  .sale-btn-wrap{
    background-image: @wrap_img_mobile;
    background-size: 100%;
    width: @wrap_width_mobile;
    height: @wrap_height_mobile;
    left: @wrap_left_mobile;
    bottom: @wrap_bottom_mobile;
    &.in{
      left: @wrap_left_in_mobile;
    }
    .widget_content {
      width: @widget_content_width_mobile;
      height: @widget_content_height_mobile;
      bottom: @widget_content_bottom_mobile;
      &.in {
        left: 0;
      }
    }

    .widget_close_btn {
      left: @widget_close_btn_left_mobile;
      bottom: @widget_close_btn_bottom_mobile;
      height: @widget_close_btn_width_mobile;
      width: @widget_close_btn_height_mobile;
    }

    &.shot-img{
      background: @wrap_img_short_mobile;
      background-repeat: no-repeat;
      background-size: @wrap_short-img_bg_size_mobile;
      height: @wrap_height_short_mobile;
      width: @wrap_width_short_mobile;
      bottom: @wrap_bottom_short_mobile;
      left: @wrap_left_short_mobile;

      .widget_content {
        height: @widget_content_height_short_mobile;
        width: @widget_content_width_short_mobile;
        bottom: @widget_content_bottom_short_mobile;
        left: @widget_content_left_short_mobile;
      }
    }
  }
}