@import "@css[shared]/components/catalog/_catalog";

.catalog {
   margin-bottom: 15px;
   padding: 0;
   border: 0;
   border-radius: 5px;
   position: relative;

   &:hover {
      z-index: 0;

      .title {
         text-decoration: underline;
      }

      .btn-green {
         display: flex;

         &.variations-wrap {
            display: none;

            @media screen and (max-width: $sm - 1) {
               display: flex;
            }
         }
      }
   }

   &.hovered {
      background: $white;

      .catalog-variations {
         opacity: 1;
      }
   }

   .variations {
      margin-top: -35px;
      float: left;
      margin-left: 15px;
      margin-bottom: 10px;
      font-size: 12px;
      color: $text-hover;
   }

   .img-responsive {
      margin: 0 auto 8px;
   }

   .title {
      height: 2.7em;
      padding: 0 10px;
      text-align: left;
      margin-top: 10px;
      line-height: 1.3;
   }

   .price {
      text-align: left;
      padding: 5px 10px;

      del {
         color: #656565;
      }
   }

   .delivery {
      margin-top: 0;
      text-align: left;
      font-size: 12px;
      font-weight: 600;
      padding: 0 10px;

      &.delivery-0 {
         color: $green-price;
      }
   }

   .img {
      position: relative;
      padding: 49px 20px;

      &::before {
         content: "";
         display: block;
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background-color: rgba(0, 0, 0, .02);
         opacity: 1;
         transition: opacity .3s ease;
         z-index: 2;
         pointer-events: none;
         border-radius: 10px;
      }
   }

   .red {
      color: $price-color;
   }

   @media screen and (min-width: $lg - 1) {
      &:hover {
         box-shadow: unset;

         .title {
            text-decoration: underline;
         }
      }
   }
}

.catalog-flags.flags {
   padding-left: 10px;
   padding-right: 5px;
   width: 100%;

   .flag {
      float: left;
      margin-right: 10px;
      margin-bottom: 5px;
      padding: 6px 6px 3px 6px;
   }

   .flag-discount {
      float: right;
      padding: 0;
      width: 45px;
      height: 45px;
      font-size: 14px;
      line-height: 49px;
      background-color: $pink-alt;
   }
}

.catalog-buy-form {
   .variations-wrap {
      right: 10px;

      &.btn {
         position: absolute;
         bottom: 120px;
      }
   }

   .catalog-btn {
      left: 10px;

      &.btn {
         position: absolute;
         bottom: 120px;
      }

      @media screen and (max-width: $md - 1) {
         left: unset;
         right: 10px;
         display: flex;
      }
   }
}
