/*!*******************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!../web/app/themes/shared/components/woocommerce/templates/single-product/variation-boxes/variation-boxes_styles.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.variation-boxes {
  --label-border-color: var(--grey-400);
  --label-padding-y: 1.2rem;
  --label-padding-x: 1rem;
}
@media (max-width: 767px) {
  .variation-boxes {
    --color-width: 10rem;
  }
}
.variation-boxes__attr {
  margin-block: 1.5rem;
}
.variation-boxes__attr[data-attr=pa_optie2] .twz-component-woocommerce__productdetail__config-content:first-of-type, .variation-boxes__attr[data-attr=liter] .twz-component-woocommerce__productdetail__config-content:first-of-type {
  margin-top: 0;
}
.variation-boxes__attr[data-attr=pa_optie2] .twz-component-woocommerce__productdetail__config-content:last-of-type, .variation-boxes__attr[data-attr=liter] .twz-component-woocommerce__productdetail__config-content:last-of-type {
  margin-bottom: 0.75rem;
}
.variation-boxes__attr[data-attr=pa_optie2] .title, .variation-boxes__attr[data-attr=liter] .title {
  display: inline-block;
}
.variation-boxes__attr[data-attr=pa_optie2] .title + .twz-element-calculator, .variation-boxes__attr[data-attr=liter] .title + .twz-element-calculator {
  margin-left: 2rem;
  margin-top: -3px;
}
@media (max-width: 767px) {
  .variation-boxes__attr[data-attr=pa_optie2] .title + .twz-element-calculator, .variation-boxes__attr[data-attr=liter] .title + .twz-element-calculator {
    margin-left: 0.75em;
  }
}
.variation-boxes__attr:first-of-type {
  margin-top: 0;
}
.variation-boxes__attr:last-of-type {
  margin-bottom: 0;
}
.variation-boxes__attr > .list {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  min-height: 5.2rem;
  margin-left: 0;
  margin-bottom: 0.8rem;
  flex-wrap: wrap;
}
@media (max-width: 767px) {
  .variation-boxes__attr > .list {
    flex-direction: column;
  }
}
.variation-boxes__attr > .list > li {
  margin: 0;
  display: inline-block;
  line-height: 3.3;
  flex: 0 1 auto;
}
.variation-boxes__attr > .list > li:first-of-type {
  margin-left: 0;
}
@media (max-width: 1024px) {
  .variation-boxes__attr > .list > li {
    flex: 0 1 calc(50% - 3rem);
  }
}
.variation-boxes__attr > .list > li::before {
  content: none;
}
.variation-boxes__attr > .list > li:not(.is-selected) label:before {
  background-color: unset;
}
.variation-boxes__attr > .list > li input {
  top: 0;
}
.variation-boxes__attr > .list > li:has([for=color_mixed]):not(:has([data-has-color=true])) label:before, .variation-boxes__attr > .list > li:has([for=color_mixed]):not(:has([data-has-color=true])) label:after {
  content: none;
}
.variation-boxes__attr > .list > li label {
  --label-padding-left: 4rem;
  cursor: pointer;
  background-color: #ffffff;
  border-radius: 8px;
  padding: var(--label-padding-top, var(--label-padding-y, 1.2rem)) var(--label-padding-right, var(--label-padding-x, 1rem)) var(--label-padding-bottom, var(--label-padding-y, 1.2rem)) var(--label-padding-left, var(--label-padding-x, 1rem));
  color: #143D59;
  transition: 0.2s ease-in-out;
  position: relative;
  display: flex;
  align-items: center;
  line-height: 1.4;
  text-align: center;
  height: 100%;
  border: 1px solid var(--label-border-color, var(--grey-400));
  font-weight: 700;
  gap: 0 1rem;
}
.variation-boxes__attr > .list > li label:hover {
  --label-border-color: var(--blue-800);
}
.twz-component-woocommerce__productdetail__config-color .variation-boxes__attr > .list > li label {
  --label-padding-left: 4rem;
  display: flex;
  text-align: left;
  gap: 0;
}
@media (max-width: 767px) {
  .twz-component-woocommerce__productdetail__config-color .variation-boxes__attr > .list > li label {
    justify-content: space-between;
  }
}
.variation-boxes__attr > .list > li label:before, .variation-boxes__attr > .list > li label:after {
  top: 50%;
  translate: 0 -50%;
  left: 1rem;
}
.variation-boxes__attr > .list > li label:before {
  translate: 3px -50%;
}
@media (min-width: 768px) {
  .variation-boxes__attr > .list > li label:hover {
    border-color: #143D59;
  }
}
.variation-boxes__attr > .list > li label:has(button[data-is-tooltip=tooltip]):not(:has(.twz-card)) {
  padding-right: 3rem;
}
.variation-boxes__attr > .list > li label:has(.color) {
  --label-padding-right: 0;
  overflow: clip;
}
@media (max-width: 767px) {
  .variation-boxes__attr > .list > li label:has(.color) {
    padding-right: 12rem;
  }
}
.variation-boxes__attr > .list > li label > .price-wrap {
  display: block;
  font-size: 1.2rem;
  text-align: center;
  color: #143D59;
  margin-bottom: 0;
}
.variation-boxes__attr > .list > li label .color {
  width: var(--color-width, 5rem);
  background-color: var(--twz-alias-hex, var(--twz-productdetail-config-color-bg, var(--white)));
  margin-top: calc(var(--label-padding-y, 1.5rem) * -1);
  margin-bottom: calc(var(--label-padding-y, 1.5rem) * -1);
  margin-left: 2rem;
  height: calc(100% + var(--label-padding-y, 1.5rem) * 2);
  border-left: 1px solid var(--label-border-color);
}
@media (max-width: 767px) {
  .variation-boxes__attr > .list > li label .color {
    position: absolute;
    right: 0;
    width: 5rem;
  }
}
.variation-boxes__attr > .list > li:is(.is-selected) label {
  --label-border-color: var(--blue-400);
  background-color: var(--blue-300);
  color: #143D59;
}
.variation-boxes__attr > .list > li:is(.is-selected) label > span {
  color: #143D59;
}
.variation-boxes__attr:not([data-extendedview=true]) > .list > li {
  min-width: 15rem;
}
@media (max-width: 767px) {
  .variation-boxes__attr:not([data-extendedview=true]) > .list > li {
    min-width: 10rem;
    flex: 1 1 auto;
  }
}
.variation-boxes li:not(.active):not(.selected) {
  opacity: 0.3;
  pointer-events: none;
}
.variation-boxes .twz-component-woocommerce__productdetail__config-color li:not(.selected):not(.active) {
  opacity: 0.3;
}

/*# sourceMappingURL=variation-boxes.css.map*/