$variation-item-size: 40px;
$variation-margin: 10px !default;
$variation-color: $text-dark !default;
$variation-border-color: $border-color !default;
$variation-border-width: 1px !default;
$variation-active-bg: $brand-primary !default;
$variation-active-color: $white !default;

@import "@css[shared]/page/product/_product-variations";

.product-variations {
   align-items: center;

   .product-variation {
      background-color: $white;
      margin-bottom: 20px;
   }
}

.product-variations:not(.product-colors) {
   .product-variation {
      border-radius: $border-radius-base;
      padding: 6px 20px 4px;
      border-width: 1px;
      margin: 0 5px 10px 0;
      font-family: $font-family-heading;
      font-size: $font-size-smaller;
      width: calc(100% / 3 - 5px);

      @media screen and (min-width: $lg) and (max-width: $xxl - 1), screen and (max-width: $sm - 1) {
         width: calc(50% - 5px);
      }
   }

   input.disabled + .product-variation {
      pointer-events: none;
      opacity: .5;
      cursor: default;
   }

   .variation-handlebar {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 83px;

      .fc {
         font-size: 50px;
      }

      &.soldout {
         &::before {
            width: #{(83px - $variation-border-width * 2) * 1.414213562373095}; // pythagorova veta
            left: calc(50% - (83px / 2 - #{$variation-border-width} * 2));
         }
      }
   }
}

.product-colors {
   margin-bottom: 20px;
}

input:checked + .product-variation {
   background: $white;
   color: $text-dark;
   border-width: 2px;

   &.product-variation-color {
      .color {
         opacity: 1;

         &::after {
            width: 28px;
            height: 28px;
            opacity: 1;
            border-color: $black;
         }
      }
   }

   &.soldout {
      &:before {
         border-color: $black;
      }
   }
}



.product-variations-header {
   margin-bottom: 12px;
   align-items: center;

   .h5 {
      font-weight: $font-weight-semibold;
      margin-bottom: 0;
   }

   h6 {
      font-size: $font-size-h5;
      font-weight: $font-weight-semibold;
      margin-bottom: 0;
   }
}

.product-variation-color {
   height: 28px;
   width: 28px;
   min-width: 28px;
   border-radius: 50%;
   position: relative;
   border: 0;
   transition: border 0s;
   margin-right: 4px;

   &.soldout {
      &::before,
      &::after {
         content: '';
         position: absolute;
         left: 50%;
         top: 50%;
         transform-origin: center;
         width: 28px;
         z-index: 1;
         border-top: 1px solid $black;
      }

      &::before {
         transform: translate(-50%, -50%) rotate(45deg);
      }

      &::after {
         transform: translate(-50%, -50%) rotate(-45deg);
      }

      .color {
         opacity: .85;
      }
   }

   .color {
      display: block;
      position: relative;
      min-width: 18px;
      height: 18px;
      border-radius: 50%;
      background-color: $body-bg-alt;
      transition: opacity $transition-speed;

      &::after {
         content: "";
         position: absolute;
         left: 50%;
         top: 50%;
         border-radius: 50%;
         width: 28px;
         height: 28px;
         transform: translate(-50%, -50%);
         opacity: 1;
         border: 1px solid $border-color;
         transition: all $transition-speed;
      }

      &-white {
         border: 1px solid $border-color;
      }
   }
}

.product-variations-hidden {
   display: none;
}

.variations-b2b-table {
   th {
      background-color: $body-bg-alt-light;
      color: $text-muted;
      border-bottom: 0 !important;

      &:first-child {
         border-radius: $border-radius-base 0 0 $border-radius-base;
      }

      &:last-child {
         border-radius: 0 $border-radius-base $border-radius-base 0;
      }
   }

   .delivery-0 {
      text-align: right;
   }

   small {
      color: $text-muted;
   }

   .submit-block {
      justify-content: flex-end;
   }
}
