/* 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 {
    /* --swatch-input--size: unset;
    --swatch--size: unset;
    --swatch--border-radius: unset;
    box-shadow: inset 0 0 0 1px rgb(var(--color-foreground),.1),inset 0 0 rgb(var(--color-background));
    border: none;
    border-radius: var(--pills-radius); */
    background-repeat: no-repeat;
    position: relative;
    border: 1px solid transparent;
    cursor: pointer;
    width: 30px;
    height: 30px;
    background-position: 50%;
    background-size: 42px;
    border-radius: var(--variant-pills-radius);
    border: var(--variant-pills-border-width) solid rgba(var(--color-foreground),var(--variant-pills-border-opacity));
  }
  .wbswatchclr .swatch {
    --swatch-input--size: unset;
    --swatch--size: unset;
    --swatch--border-radius: unset;
    border: none;
    /* border-radius: var(--variant-pills-radius); */
    padding: 2px;
    min-width: 18px;
    min-height: 18px;
    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);
  }