/**
 * VeryVariableFrontend.css
 *
 * Styles for the VeryVariable module Frontend UI
 */

 #veryvariable-attributes, #veryvariable-attribute-rows  {
    transition: height 0.6s cubic-bezier(.25,1.7,.35,.8);
    overflow: hidden visible;
    position: relative;
    padding-left: 5px;
    left: -5px;
  }

  #veryvariable-attributes .is-deleting {
    opacity: 0;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: opacity 0.5s, height 0.5s, margin 0.5s, padding 0.5s;
    overflow: hidden;
  }

  #product-page-swatch-name {
    position: relative;
    height: 100%;
    display: inline-block;
    --name: '';
    white-space: nowrap;
    background-color: white;
    /* Remove width: min-content; to allow width to be set by pseudo or span */
  }


.opacity-0 {
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  
  .vv-fe-attribute-row {
    transition: opacity 0.4s ease;
  }

.vv-fe-attribute-row {
    margin-bottom: 20px;
    position: relative;
    & .item:hover {
      cursor: pointer;
    }
}



.vv-fe-attribute-label {
    font-weight: 400;
    margin-bottom: 10px;
    position: relative;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    &:after {
        width: 80%;
        position: relative;
        right: -5px;
        content: "";
        border-bottom: 1px dashed #d3d3d3;
        top: -8px;
        display: inline-flex;
    }
}

.vv-attribute-text {
    padding: 5px 10px;
    border: 1px solid #333;
    color: #333;
    transition: all .15s linear;
    display: inline-block;
    border-radius: 3px;
    margin: 0 8px 8px 0;
    &.active {
        border-color: #9ad1c0;
        background-color: #9ad1c0;
        color: white;
    }
    &.hidden {
        display:none;
    }
}

.vv-attribute-image {
  background-color: var(--image-border-color);
  padding: 2px;
  box-sizing: content-box;
  background-clip: content-box;				
  width: 35px;
  border: 3px solid transparent;
  position: relative;
  height: 35px;
  display: inline-block;
  border-radius: 100%;
  margin: 0 5px 5px 0;
  background-position: center;
  background-size: 200%;
  &.active {
    border-color: var(--image-border-color);
    color: white;
  }
  &.hidden {
    display:none;
  }
  &:hover:not(.active)::after {
    content: '';
    position: absolute;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    top: 0px;
    left: 0px;
    border: 3px solid var(--image-border-color);
    border-radius: 100%;
    box-sizing: content-box;
    animation: borderRipple .75s ease-out infinite;
  }
}

.vv-attribute-swatch {
  background-color: var(--swatch-color);
  padding: 2px;
  box-sizing: content-box;
  background-clip: content-box;				
  width: 35px;
  border: 3px solid transparent;
  position: relative;
  height: 35px;
  display: inline-flex;
  border-radius: 100%;
  margin: 0 5px 5px 0;
  &.active {
      border-color: var(--swatch-border-color);
      background-color: var(--swatch-color);
      color: white;
  }
  &.hidden {
      display:none;
  }
  &:hover:not(.active)::after {
      content: '';
      position: absolute;
      width: calc(100% - 6px);
      height: calc(100% - 6px);
      top: 0px;
      left: 0px;
      border: 3px solid var(--swatch-border-color);
      border-radius: 100%;
      box-sizing: content-box;
      animation: borderRipple .75s ease-out infinite;
      cursor: pointer;
  }
}


	/* The animation code */
	@keyframes borderRipple {
    0% {transform: scale(1.05); opacity: 0;}
    35% { opacity: 1;}
    100% {transform: scale(1.35); opacity: 0;}
}



.vv-fe-attribute-row {
  margin-bottom: 20px;
  position: relative;
}

.vv-fe-attribute-label {
  font-weight: 500;
  margin-bottom: 10px;
  position: relative;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  &:after {
      width: -webkit-fill-available;
      position: relative;
      right: -5px;
      content: "";
      border-bottom: 1px dashed #d3d3d3;
      top: -8px;
      display: inline-block;
  }
  & div {
    font-weight: 400;
  }
}


.variation-data {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin-bottom: 10px;
}

#veryvariable-attributes .varDataContainer {
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
  justify-items: center;
  align-items: center;
  flex-wrap: nowrap;
  display: inline-flex;  
  &.set .varDataKey {
    background-color: #d1d1d1;
  }
  &.set .varDataValue {
    border-color: #d1d1d1;
    color: #4b4b4b;
    margin-left: -1px;
    display: inline;
    padding: 5px 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    text-align: center;
    align-items: inherit;
    white-space: nowrap;
  }
  &.set .varDataValueMat {
    border-color: #d1d1d1;
    color: #4b4b4b;
    margin-left: -1px;
    display: inline;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    text-align: center;
    align-items: inherit;
    box-sizing: border-box;  
  }
}

#veryvariable-attributes .varDataContainer {
  max-width: 0px;
  &.set {
        display: flex;
        margin-right: 10px;
        max-width: fit-content;
        align-items: center;
    }
}

#veryvariable-attributes .varDataContainer .varDataKey {
  padding: 6px 10px;
  display: inline-block;
  position: relative;
  background-color: white;
  color: white;
  z-index: 1;
  border-radius: 5px 0 0 5px;
  font-weight: 500;
  transition: all .3s ease-in-out;
}
  
#veryvariable-attributes .varDataContainer .varDataValue, #veryvariable-attributes .varDataContainer .varDataValueMat {
  position: relative;
  display: inline-flex;
  border: 1px solid white;
  color: white;
  box-sizing: border-box;
  font-weight: 400;
  font-size: initial;
  border-radius: 0px 5px 5px 0px;
  transition: all .3s ease-in-out;
  text-align: left;
  align-content: center;
}

#veryvariable-attributes .varDataContainer #varDataCompValue {
  min-width: 125px;
  padding: 0;
  & div {
    text-align: center;
    padding: 7px 0;
    font-size: 12px;
    font-weight: 600;
  }
}

#veryvariable-attributes .varDataContainer .compMaterial {
  display: inline-block;
  white-space: nowrap;
  background-color: white;
  min-width: 35px;
  text-align: center;
  padding: 5px 0;
  align-content: center;
  height: 100%;
  text-shadow: 2px 1px 1px rgba(255,255,255,0.75);
  transition: all .3s ease-in-out;
  &:first-child {
    border-right: 1px solid #333;
  }
  &:nth-child(odd) {
    background-color: #f4f4f4;
  }
  &:last-child {
    border-radius: 0 5px 5px 0;
    border: 0;
  }
}

/* Composition material backgrounds */
#veryvariable-attributes .varDataContainer .compMaterial.BA { 
  background-color: #ffffff;
  opacity: 0.8;
  background-image:  linear-gradient(135deg, #d8d8d8 25%, transparent 25%), linear-gradient(225deg, #d8d8d8 25%, transparent 25%), linear-gradient(45deg, #d8d8d8 25%, transparent 25%), linear-gradient(315deg, #d8d8d8 25%, #ffffff 25%);
  background-position:  7px 0, 7px 0, 0 0, 0 0;
  background-size: 14px 14px;
  background-repeat: repeat;
}
#veryvariable-attributes .varDataContainer .compMaterial.CO { 
  background-color: #ffffff;
  opacity: 0.8;
  background: repeating-linear-gradient( -45deg, #d8d8d8, #d8d8d8 3.5px, #ffffff 3.5px, #ffffff 17.5px );
}
#veryvariable-attributes .varDataContainer .compMaterial.EL { 
  background-color: #ffffff;
  opacity: 0.8;
  background-image: radial-gradient( ellipse farthest-corner at 7px 7px , #d8d8d8, #d8d8d8 50%, #ffffff 50%);
  background-size: 7px 7px;
  background-position: -1px -.5px;
}
#veryvariable-attributes .varDataContainer .compMaterial.LH { 
  background-color: #ffffff;
  opacity: 0.8;
  background-image:  repeating-radial-gradient( circle at 0 0, transparent 0, #ffffff 7px ), repeating-linear-gradient( #d8d8d855, #d8d8d8 );
}
#veryvariable-attributes .varDataContainer .compMaterial.LI { 
  background-color: #ffffff;
  opacity: 0.8;
  background-image:  linear-gradient(135deg, #d8d8d8 25%, transparent 25%), linear-gradient(225deg, #d8d8d8 25%, transparent 25%), linear-gradient(45deg, #d8d8d8 25%, transparent 25%), linear-gradient(315deg, #d8d8d8 25%, #ffffff 25%);
  background-position:  7px 0, 7px 0, 0 0, 0 0;
  background-size: 7px 7px;
  background-repeat: repeat;
}
#veryvariable-attributes .varDataContainer .compMaterial.LU { 
  background: radial-gradient(circle, #b3cca2 0.75em, rgba(255, 255, 255, 0) 0.75em, rgba(255, 255, 255, 0) 1.5em, rgba(204, 195, 148, 0.7) 1.5em, rgba(204, 195, 148, 0.7) 1.8em, rgba(255, 255, 255, 0) 1.8em) 0 0, radial-gradient(circle, #ccc394 0.75em, rgba(255, 255, 255, 0) 0.75em, rgba(255, 255, 255, 0) 1.5em, rgba(179, 204, 162, 0.7) 1.5em, rgba(179, 204, 162, 0.7) 1.8em, rgba(255, 255, 255, 0) 1.8em) 3em 3em, radial-gradient(circle, rgba(179, 204, 162, 0.7) 0.375em, rgba(255, 255, 255, 0) 0.375em) 3em 0, radial-gradient(circle, rgba(204, 195, 148, 0.7) 0.3em, rgba(255, 255, 255, 0) 0.3em) 0 3em;
  background-size: 6em 6em;
  background-color: #f2dba5;
  background-repeat: repeat;
}
#veryvariable-attributes .varDataContainer .compMaterial.PA { 
  background-color: #ffffff;
opacity: 0.8;
background-image:  linear-gradient(#d8d8d8 1.4000000000000001px, transparent 1.4000000000000001px), linear-gradient(90deg, #d8d8d8 1.4000000000000001px, transparent 1.4000000000000001px), linear-gradient(#d8d8d8 0.7000000000000001px, transparent 0.7000000000000001px), linear-gradient(90deg, #d8d8d8 0.7000000000000001px, #ffffff 0.7000000000000001px);
background-size: 35px 35px, 35px 35px, 7px 7px, 7px 7px;
background-position: -1.4000000000000001px -1.4000000000000001px, -1.4000000000000001px -1.4000000000000001px, -0.7000000000000001px -0.7000000000000001px, -0.7000000000000001px -0.7000000000000001px;
}
#veryvariable-attributes .varDataContainer .compMaterial.PE { 
  background-color: #ffffff;
  opacity: 0.8;
  background-image: radial-gradient(#d8d8d8 0.8500000000000001px, #ffffff 0.8500000000000001px);
  background-size: 17px 17px;
}
#veryvariable-attributes .varDataContainer .compMaterial.PL { 
  background:
  radial-gradient(50% 50% at 100% 0,#ffffff 0%  5% ,#d8d8d8 6%  15%,#ffffff 16% 25%,#d8d8d8 26% 35%,#ffffff 36% 45%,
   #d8d8d8 46% 55%,#ffffff 56% 65%,#d8d8d8 66% 75%,#ffffff 76% 85%,#d8d8d8 86% 95%,
   #0000 96%),
  radial-gradient(50% 50% at 0 100%,#ffffff 0%  5% ,#d8d8d8 6%  15%,#ffffff 16% 25%,#d8d8d8 26% 35%,#ffffff 36% 45%,
   #d8d8d8 46% 55%,#ffffff 56% 65%,#d8d8d8 66% 75%,#ffffff 76% 85%,#d8d8d8 86% 95%,
   #0000 96%),
  radial-gradient(50% 50%,#ffffff 0%  5% ,#d8d8d8 6%  15%,#ffffff 16% 25%,#d8d8d8 26% 35%,#ffffff 36% 45%,
   #d8d8d8 46% 55%,#ffffff 56% 65%,#d8d8d8 66% 75%,#ffffff 76% 85%,#d8d8d8 86% 95%,
   #0000 96%),
  radial-gradient(50% 50%,#ffffff 0%  5% ,#d8d8d8 6%  15%,#ffffff 16% 25%,#d8d8d8 26% 35%,#ffffff 36% 45%,
   #d8d8d8 46% 55%,#ffffff 56% 65%,#d8d8d8 66% 75%,#ffffff 76% 85%,#d8d8d8 86% 95%,
   #0000 96%) 14px 14px;
background-size: 28px 28px;
background-color: #ffffff;
}
#veryvariable-attributes .varDataContainer .compMaterial.PU { 
  background: repeating-radial-gradient(circle, transparent, transparent 4.9px, #d8d8d8 4.9px, #d8d8d8 6.3px), repeating-radial-gradient(circle, transparent, transparent 4.9px, #d8d8d8 4.9px, #d8d8d8 6.3px), #ffffff;
  background-size: 28px 28px;
  background-position: 0 0, 14px 14px, 28px 14px;
  background-color: #ffffff;
}
#veryvariable-attributes .varDataContainer .compMaterial.PVC { 
  background-color: #ffffff;
background-image:  linear-gradient(#d8d8d8 0.8px, transparent 0.8px), linear-gradient(to right, #d8d8d8 0.8px, #ffffff 0.8px);
background-size: 16px 16px;
}
#veryvariable-attributes .varDataContainer .compMaterial.REPT { 
  background-color: #ffffff;
opacity: 0.8;
background-image: linear-gradient(0deg, #ffffff 50%, #d8d8d8 50%);
background-size: 11px 11px;
}
#veryvariable-attributes .varDataContainer .compMaterial.RY { 
  background-color: #ffffff;
opacity: 0.8;
background: repeating-linear-gradient( 45deg, #d8d8d8, #d8d8d8 2.5px, #ffffff 2.5px, #ffffff 12.5px );
}
#veryvariable-attributes .varDataContainer .compMaterial.SP { 
  background: 
  linear-gradient(135deg,#0000 20.5%,#ffffff 0 29.5%,#0000 0) 0 7px,
  linear-gradient( 45deg,#0000 8%,#ffffff 0 17%, #0000 0 58%) 14px 0,
  linear-gradient(135deg,#0000 8%,#ffffff 0 17%, #0000 0 58%,#ffffff 0 67%,#0000 0),        
  linear-gradient( 45deg,#0000 8%,#ffffff 0 17%, #0000 0 58%,#ffffff 0 67%,#0000 0 83%,#ffffff 0 92%,#0000 0),
  #d8d8d8;
background-size: 28px 28px;

}
#veryvariable-attributes .varDataContainer .compMaterial.VI { 
  background:
      repeating-linear-gradient( 45deg,#0000 calc(-650%/13) calc(50%/13),#d8d8d8 0 calc(100%/13),
      #0000 0 calc(150%/13),#d8d8d8 0 calc(200%/13),
      #0000 0 calc(250%/13),#d8d8d8 0 calc(300%/13)),repeating-linear-gradient( 45deg,#0000 calc(-650%/13) calc(50%/13),#d8d8d8 0 calc(100%/13),
      #0000 0 calc(150%/13),#d8d8d8 0 calc(200%/13),
      #0000 0 calc(250%/13),#d8d8d8 0 calc(300%/13)) 17px 17px,
      repeating-linear-gradient(-45deg,#0000 calc(-650%/13) calc(50%/13),#d8d8d8 0 calc(100%/13),
      #0000 0 calc(150%/13),#d8d8d8 0 calc(200%/13),
      #0000 0 calc(250%/13),#d8d8d8 0 calc(300%/13)),repeating-linear-gradient(-45deg,#0000 calc(-650%/13) calc(50%/13),#d8d8d8 0 calc(100%/13),
      #0000 0 calc(150%/13),#d8d8d8 0 calc(200%/13),
      #0000 0 calc(250%/13),#d8d8d8 0 calc(300%/13)) 17px 17px #ffffff;
background-size: 34px 34px;
}
#veryvariable-attributes .varDataContainer .compMaterial.WO { 
  background:
      radial-gradient(35.36% 35.36% at 100% 25%,#0000 66%,#d8d8d8 68% 70%,#0000 72%) 17px 17px/calc(2*17px) calc(2*17px),
      radial-gradient(35.36% 35.36% at 0    75%,#0000 66%,#d8d8d8 68% 70%,#0000 72%) 17px 17px/calc(2*17px) calc(2*17px),
      radial-gradient(35.36% 35.36% at 100% 25%,#0000 66%,#d8d8d8 68% 70%,#0000 72%) 0 0/calc(2*17px) calc(2*17px),
      radial-gradient(35.36% 35.36% at 0    75%,#0000 66%,#d8d8d8 68% 70%,#0000 72%) 0 0/calc(2*17px) calc(2*17px),
      repeating-conic-gradient(#ffffff 0 25%,#0000 0 50%) 0 0/calc(2*17px) calc(2*17px),
      radial-gradient(#0000 66%,#d8d8d8 68% 70%,#0000 72%) 0 calc(17px/2)/17px 17px
      #ffffff;
}
#veryvariable-attributes .varDataContainer .compMaterial.OL { 
  background:
      radial-gradient(27% 29% at right, #0000 83%,#d8d8d8 85% 99%,#0000 101%) calc(12px/2) 12px,
      radial-gradient(27% 29% at left, #0000 83%,#d8d8d8 85% 99%,#0000 101%) calc(12px/-2) 12px,
      radial-gradient(29% 27% at top, #0000 83%,#d8d8d8 85% 99%,#0000 101%) 0 calc(12px/2),
      radial-gradient(29% 27% at bottom, #0000 83%,#d8d8d8 85% 99%,#0000 101%) 0 calc(12px/-2)
      #ffffff;
background-size: 24px 24px;
}
#veryvariable-attributes .varDataContainer .compMaterial.JU { 
  background:
      calc( .9*14px) calc( .9*14px)/calc(2*14px) calc(2*14px) conic-gradient(at 20% 20%,#0000 75%,#ffffff 0),
      calc(-.1*14px) calc(-.1*14px)/calc(2*14px) calc(2*14px) conic-gradient(at 20% 20%,#0000 75%,#ffffff 0),
      calc( .7*14px) calc( .7*14px)/calc(2*14px) calc(2*14px) conic-gradient(at 40% 40%,#0000 75%,#d8d8d8 0),
      calc(-.3*14px) calc(-.3*14px)/calc(2*14px) calc(2*14px) conic-gradient(at 40% 40%,#0000 75%,#d8d8d8 0),
      conic-gradient(from 90deg at 20% 20%,#ffffff 25%,#d8d8d8 0) 
       0 0/14px 14px;
}