.product-variations-shade {
   display: flex;
   flex-wrap: wrap;
   margin: 0 -2px 20px;
}

.product-variations-shade-soldout {
   flex: 100%;
   margin: 0;

   .product-variations-shade {
      margin: 0;
   }

   [data-opener] {
      margin-top: 10px;
      display: inline-block;
      font-size: $font-size-smaller;
      color: $text-dark;

      .active {
         display: none;
      }

      &.active {
         .active {
            display: block;
         }

         .non-active {
            display: none;
         }
      }
   }
}

.variations-shade {
   border: 1px solid transparent;
   border-radius: 50%;
   cursor: pointer;
   margin: 2px;
   padding: 3px;
   position: relative;
   width: 42px;
   height: 42px;
   transition: border-color $transition-speed;

   &::before {
      @include fonticon;

      color: $white;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
   }

   img {
      border-radius: 50%;
      object-fit: cover;
      width: 34px;
      height: 34px;
   }

   &.variations-shade-white {
      img {
         border: 1px solid $border-color;
      }
   }

   [data-reload] {
      display: none !important;
   }

   &:hover,
   &.active {
      border-color: $black;
      z-index: inherit;
   }

   &.active::before {
      content: $icons_check;
   }

   &.soldout::before {
      content: $icons_remove;
   }
}

.shade-buy {
   display: flex;
   align-items: center;
   border-bottom: 1px solid $border-color;
   padding-bottom: 18px;
   margin-bottom: 20px;

   p {
      margin: 0;
   }

   .unit-price {
      color: $body-color;
      font-size: 12px;
      white-space: nowrap;
   }

   .shade-price-wrapper {
      margin-left: auto;
      margin-right: 20px;
      text-align: right;
      line-height: 1.3;
      white-space: nowrap;
      position: relative;
   }

   .shade-flags {
      position: absolute;
      right: calc(100% + 10px);
      top: calc(50% - 18px);
      display: flex;
      align-items: center;

      .flag,
      .special-product-flag {
         left: 0;
      }
   }

   .price-final {
      color: $black;
      font-weight: $font-weight-bold;
      font-size: 20px;
   }

   .price-common {
      text-decoration: line-through;
   }

   .btn {
      flex-grow: 0;
      width: 158px;
   }

   .btn-watchdog {
      width: 178px;
      padding: 13px 5px;
      justify-content: center;
      flex-wrap: wrap;

      .rwd-title {
         flex: 100%;
      }
   }

   @media screen and (max-width: $sm - 1) {
      .name,
      .shade-price-wrapper > p {
         display: none !important;
      }

      .shade-price-wrapper {
         margin: 0;
      }

      .shade-flags {
         z-index: 1;
         left: 5px;
         right: unset;
         top: -20px;
      }
   }

   @media screen and (max-width: 360px) {
      .shade-flags {
         top: -30px;
      }
   }
}

@media screen and (max-width: $sm - 1) {
   .wpj-tooltip {
      display: none !important;
   }
}
