$watchdog-product-vertical-padding: 10px !default;
$watchdog-product-image-width: 85px !default;

.watchdog-products {
   line-height: $line-height-sm;
   padding-bottom: 40px;

   p {
      margin: 0;
   }

   .product {
      border-top: 1px solid $border-color;
      display: flex;
      align-items: center;
      padding: $watchdog-product-vertical-padding 0;

      &:last-child {
         border-bottom: 1px solid $border-color;
      }
   }

   .image {
      width: $watchdog-product-image-width;
      flex: none;
   }

   .title {
      flex: 1;
      padding-right: 15px;
      margin-left: 20px;

      a {
         @include underline-hover;

         color: $text-dark;
      }

      .variation {
         display: block;
         color: $text-muted;
         font-size: $font-size-smaller;
      }
   }

   .availability {
      flex: none;
      text-align: left;
      width: 130px;
   }

   .price-resp,
   .availability-resp {
      display: none;
   }

   .price {
      color: $text-dark;
      flex: none;
      font-size: 18px;
      font-weight: $font-weight-bold;
      text-align: right;
      width: 10ch;
   }

   .product-links {
      width: 250px;
      text-align: right;

      p {
         font-size: $font-size-smaller;

         &:nth-child(2) {
            margin-top: 10px;
         }
      }

      a {
         margin-left: 5px;

         .fc {
            font-size: 18px;
            position: relative;
            top: -1px;
         }
         @include haf {
            color: $state-error;
         }
      }
   }

   @media screen and (max-width: $xl - 1) {
      .availability {
         display: none;
      }

      .availability-resp {
         display: block;
      }
   }

   @media screen and (max-width: $lg - 1) {
      .price {
         display: none;
      }

      .price-resp {
         display: block;
         text-align: left;
      }
   }

   @media screen and (max-width: $md - 1) {
      .product {
         position: relative;
         flex-wrap: wrap;
         justify-content: flex-start;
      }

      .title {
         width: calc(100% - $watchdog-product-image-width);
         padding: 0 0 0 10px;
         margin: 0;
      }

      .product-links {
         flex: 100%;
      }
   }
}
