$variation-item-size: 68px !default;
$variation-margin: 10px !default;
$variation-border-color: $border-color !default;
$variation-border-width: 1px !default;
$variation-active-border-color: $brand-primary !default;

.product-variations {
   display: flex;
   flex-wrap: wrap;
   margin-bottom: 5px;

   input {
      display: none;
   }
}

.product-variation {
   border: $variation-border-width solid $variation-border-color;
   border-radius: $border-radius-base;
   cursor: pointer;
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 0 $variation-margin $variation-margin 0;
   width: $variation-item-size;
   height: $variation-item-size;
   padding: 2px;
   position: relative;
   transition: border-color $transition-speed;

   figure {
      max-width: calc(#{$variation-item-size} - (#{$variation-border-width} * 2));
      margin: 0;
   }

   .colors {
      position: absolute;
      display: flex;
      justify-content: center;
      border-radius: 50%;
      width: 15px;
      height: 15px;
      overflow: hidden;
      top: 7px;
      left: 7px;

      span {
         flex: 1;
      }
   }

   .colors-4 {
      flex-wrap: wrap;

      span {
         flex: 50%;
         height: 50%;
      }
   }

   .variation-content {
      display: none;
   }

   &:hover {
      border-color: $variation-active-border-color;
   }

   &.soldout {
      &::before {
         content: '';
         display: block;
         border-top: $variation-border-width solid $variation-border-color;
         position: absolute;
         width: #{($variation-item-size - $variation-border-width * 2) * 1.414213562373095}; // pythagorova veta
         top: 0;
         left: calc(50% - ($variation-item-size / 2 - $variation-border-width * 2));
         transform: rotate(45deg);
         transform-origin: 0;
      }

      img {
         opacity: .5;
      }
   }

   &.disabled {
      cursor: default;
      pointer-events: none;
      opacity: .5;
   }

   &.product-variation-no-img {
      align-items: flex-start;

      @media screen and (min-width: $md) {
         width: auto;
         min-width: 111px;
      }

      .variation-content {
         flex: 1;
         display: flex;
         flex-direction: column;
         padding: 8px 38px 8px 13px;
         line-height: $line-height-md;
      }

      .title {
         font-size: $font-size-smaller;
      }
   }
}

input:checked + .product-variation {
   border-color: $variation-active-border-color;
}

@media screen and (max-width: $md - 1) {
   .product-variation {
      width: calc(50% - (#{$variation-margin} / 2));
      justify-content: flex-start;
      padding-right: 8px;

      &-even {
         margin-right: 0;
      }

      .variation-content {
         flex: 1;
         display: flex;
         flex-direction: column;
         padding-left: 15px;
         line-height: $line-height-md;
      }

      .title {
         font-size: $font-size-smaller;
      }
   }
}

@media screen and (max-width: $xs - 1) {
   .product-variation {
      width: 100%;
      margin-right: 0;
   }
}
