$variation-item-width: 80px;
$variation-item-height: 42px;
$variation-margin: 5px;

$variation-bg: $white;
$variation-color: $text-dark;
$variation-border-color: $border-color;
$variation-border-width: 1px;

$variation-active-bg: $white;
$variation-active-color: $text-dark;
$variation-active-border-color: $brand-ctr;

$variation-soldout-color: $border-color;
$variation-soldout-icon: $icons_ring;

.product-variations {
   display: flex;
   flex-wrap: wrap;
   margin: 0 -#{$variation-margin} 30px;

   input {
      opacity: 0;
      position: absolute;
      z-index: -1;
   }
}

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

   .variation-title {
      background: $variation-bg;
      position: relative;
      z-index: 1;
      padding: 5px;
      font-size: $font-size-larger;
      font-weight: $font-weight-medium;
      line-height: 1;
   }

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

   &.soldout {
      color: $border-color;

      &::before {
         @include fonticon;

         content: $variation-soldout-icon;
         color: $variation-soldout-color;
         position: absolute;
         top: 5px;
         right: 5px;
         font-size: $font-size-smaller;
      }
   }

   &.disable {
      cursor: default;
      pointer-events: none;
   }
}

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

.product-variations-header {
   color: $text-dark;
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-size: $font-size-larger;
   font-weight: $font-weight-medium;
   line-height: $line-height-sm;
   margin-bottom: 5px;

   h6 {
      font-size: $font-size-larger;
      font-weight: $font-weight-medium;
      margin: 0;
   }

   a {
      color: $brand-ctr;
      font-size: $font-size-smaller;
      font-weight: $font-weight-medium;
   }

   p {
      margin-bottom: 0;
   }
}

.product-variations-size-convertion {
   button {
      font-weight: 400;
   }
}
