@use "sass:map";
@use "@twig/scss/_global" as global;
@use "@twig/scss/variables/_variables-components" as components;

$jsmultisets-variation-item-width: 60px !default;
$jsmultisets-variation-item-height: 40px !default;
$jsmultisets-variation-margin: 10px !default;
$jsmultisets-variation-color: global.$text-dark !default;
$jsmultisets-variation-border-color: global.$border-color !default;
$jsmultisets-variation-border-width: 1px !default;
$jsmultisets-variation-active-bg: global.$brand-primary !default;
$jsmultisets-variation-active-color: global.$white !default;
$jsmultisets-variation-border-radius: 10px !default;

.jsmultisets-product-variations-wrapper {
   margin-bottom: 15px;

   .title-default {
      margin-bottom: 8px;
   }
}

.jsmultisets-product-variations {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;

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

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

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

   &.soldout {
      color: global.$text-muted;

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

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

   &.checked {
      border-color: $jsmultisets-variation-active-bg;
   }
}
