.swatch-input__input + .swatch-input__label {
  --swatch-input--border-radius: 50%;
  display: inline-block;
  max-width: 100%;
  border-radius: var(--swatch-input--border-radius);
  cursor: pointer;
  outline-offset: .2rem;
  outline-color: transparent;
  outline-style: solid;
  transition-property:
    outline-color,
    outline-width,
    box-shadow;
  transition-duration: var(--duration-short);
  transition-timing-function: ease;
  forced-color-adjust: none;
}
.swatch-input__input + .swatch-input__label.swatch-input__label--square {
  --swatch-input--border-radius: .2rem;
}
.swatch-input__input:active + .swatch-input__label,
.swatch-input__input:checked + .swatch-input__label {
  outline: .1rem solid rgb(var(--color-foreground));
}
.swatch-input__input + .swatch-input__label:hover,
.swatch-input__input:hover + .swatch-input__label {
  outline: .2rem solid rgba(var(--color-foreground), .4);
}
.swatch-input__input:focus-visible + .swatch-input__label {
  outline: .2rem solid rgba(var(--color-foreground), .5);
  box-shadow: 0 0 0 .2rem rgb(var(--color-background)), 0 0 .1rem .5rem rgba(var(--color-foreground), .25);
}
.swatch-input__input:active:focus-visible + .swatch-input__label,
.swatch-input__input:checked:focus-visible + .swatch-input__label {
  outline: .1rem solid rgb(var(--color-foreground));
  box-shadow: 0 0 0 .2rem rgb(var(--color-background)), 0 0 .1rem .4rem rgba(var(--color-foreground), .25);
}
.swatch-input__input.visually-disabled:not(:active):not(:checked) + .swatch-input__label {
  transition: none;
}
.swatch-input__input.visually-disabled:not(:active):not(:checked) + .swatch-input__label:hover {
  outline: none;
}
.swatch-input__input:disabled + .swatch-input__label {
  pointer-events: none;
}
.swatch-input__input:disabled + .swatch-input__label > .swatch,
.swatch-input__input.visually-disabled + .swatch-input__label > .swatch {
  position: relative;
  overflow: hidden;
}
.swatch-input__input:disabled + .swatch-input__label > .swatch,
.swatch-input__input.visually-disabled + .swatch-input__label > .swatch {
  opacity: .4;
}
.swatch-input__input:disabled + .swatch-input__label > .swatch:after,
.swatch-input__input.visually-disabled + .swatch-input__label > .swatch:after {
  --diagonal--size: calc(var(--swatch-input--size) * 1.414);
  --crossed-line--size: .1rem;
  content: "";
  position: absolute;
  bottom: calc(var(--crossed-line--size) * -.5);
  left: 0;
  width: var(--diagonal--size);
  height: var(--crossed-line--size);
  background-color: rgb(var(--color-foreground));
  transform: rotate(-45deg);
  transform-origin: left;
}