/* swatch-input */
.swatch-input__input + .swatch-input__label {
  --swatch-input--border-radius: var(--swatch--border-radius);
  display: inline-block;
  max-width: 100%;
  border-radius: var(--swatch-input--border-radius);
  cursor: pointer;
  outline-offset: 0.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:active + .swatch-input__label,
.swatch-input__input:checked + .swatch-input__label {
  outline: 0.1rem solid var(--color-foreground);
  border: .1rem solid var(--color-foreground);
}

.swatch-input__input:focus-visible + .swatch-input__label {
  outline: 0.2rem solid rgb(var(--color-foreground-rgb) / var(--opacity-50));
  box-shadow: 0 0 0 0.2rem var(--color-foreground), 0 0 0.1rem 0.5rem rgb(var(--color-foreground-rgb) / var(--opacity-25));
}

.swatch-input__input:active:focus-visible + .swatch-input__label,
.swatch-input__input:checked:focus-visible + .swatch-input__label {
  outline: 0.1rem solid var(--color-foreground);
  box-shadow: 0 0 0 0.2rem var(--color-foreground), 0 0 0.1rem 0.4rem rgb(var(--color-foreground-rgb) / var(--opacity-25));
}

.swatch-input__input.visually-disabled:not(:active):not(:checked) + .swatch-input__label {
  transition: none;
}
@media (hover: hover) {
  .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: var(--opacity-40);
}

.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: 0.1rem;
  content: '';
  position: absolute;
  bottom: calc(var(--crossed-line--size) * -0.5);
  left: 0;
  width: var(--diagonal--size);
  height: var(--crossed-line--size);
  background-color: var(--color-foreground);
  transform: rotate(-45deg);
  transform-origin: left;
}