/* swatch lives in its own file for reusability of the swatch in swatch-input and dropdown */
.swatch {
  --swatch-input--size: 2.4rem;
  --swatch--size: var(--swatch-input--size, 4.4rem);
  --swatch--border-radius: var(--swatch-input--border-radius, 50%);

  display: block;
  width: var(--swatch--size);
  max-width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--swatch--background);
  background-position: var(--swatch-focal-point, initial);
  background-size: cover;
  background-origin: border-box;
  border: 0.1rem solid rgba(var(--color-foreground), 0.15);
  border-radius: var(--swatch--border-radius);
}
.swatch--square {
  --swatch--border-radius: var(--swatch-input--border-radius, 0.2rem);
}
.swatch--unavailable {
  border-style: dashed;
  border-color: rgba(var(--color-foreground), 0.5);
}
.product__info-wrapper .swatch {
  background-repeat: no-repeat;
  position: relative;
  border: 1px solid transparent;
  cursor: pointer;
  width: 30px;
  height: 30px;
  background-position: 50%;
  background-size: 42px;
  border-radius: 100%;
  border: none;
}
.tmswatchclr .swatch {
  --swatch-input--size: unset;
  --swatch--size: unset;
  --swatch--border-radius: unset;
  border: none;
  padding: 2px;
  border-radius: var(--variant-pills-radius);
}
color-swatch fieldset label span.swatch {
  --swatch-input--size: unset;
  --swatch--size: unset;
  --swatch--border-radius: unset;
  display: block;
  width: 18px;
  border: none;
  border-radius: var(--variant-radius);
}
@media screen and (max-width: 749px) {
  .product__info-wrapper .swatch {
    width: 24px;
    height: 24px;
  }
}