.visual-display {
  --visual-display__size: min(2.4rem, 100%);
  position: relative;
  width: var(--visual-display__size);
  max-width: 100%;
  border: 0.1rem solid rgba(var(--color-foreground-rgb), 0.2);
  aspect-ratio: 1/1;
}

.visual-display.empty {
  border-style: dashed;
}

.visual-display--presentation-swatch {
  --visual-display__size: min(2.4rem, 100%);
  border-radius: 100%;
  overflow: hidden;
}

.visual-display-parent .visual-display--presentation-swatch {
  outline-offset: 0.2rem;
}

/* Hover, active, and focus states */
:is(
    .visual-display-parent:hover .visual-display--presentation-swatch,
    .visual-display-parent.active .visual-display--presentation-swatch,
    .visual-display-parent:has(:focus-visible) .visual-display--presentation-swatch
  ) {
  outline-style: solid;
}

/* Active state */
.visual-display-parent.active .visual-display--presentation-swatch {
  outline-width: 0;
  outline-color: rgba(var(--color-foreground-rgb), 1);
}

/* Hover state */
.visual-display-parent:hover .visual-display--presentation-swatch {
  outline-width: 0;
  outline-color: rgba(var(--color-foreground-rgb), 0.4);
}

/* Focus state */
.visual-display-parent:has(:focus-visible) .visual-display--presentation-swatch {
  outline-width: 0.2rem;
  outline-color: rgba(var(--color-foreground-rgb), 0.4);
  box-shadow: 0 0 0 0.6rem rgb(var(--color-background-rgb)), 0 0 0 0.8rem rgba(var(--color-foreground-rgb), 0.5),
    0 0 1.2rem 0.4rem rgba(var(--color-foreground-rgb), 0.3);
}

/* Focus state for older browsers */
@supports not selector(:has(a, b)) {
  .visual-display-parent:focus-within .visual-display--presentation-swatch {
    outline-offset: 0.2rem;
    outline: 0.2rem solid rgba(var(--color-foreground-rgb), 0.4);
    box-shadow: 0 0 0 0.6rem rgb(var(--color-background)), 0 0 0 0.8rem rgba(var(--color-foreground-rgb), 0.5),
      0 0 1.2rem 0.4rem rgba(var(--color-foreground-rgb), 0.3);
  }
}

.visual-display-parent.disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* Used to display the disabled dash */
.visual-display-parent.disabled .visual-display::after {
  display: block;
  content: '';
  /* 1.414 is not a magic number, it's the square root of 2, or the length of the diagonal */
  width: calc(var(--visual-display__size) * 1.414);
  border-bottom: 0.1rem solid rgba(var(--color-foreground-rgb),0.5);
  transform: rotate(-45deg);
  transform-origin: left;
}

.visual-display .visual-display__child {
  display: block;
  height: 100%;
  width: 100%;
  forced-color-adjust: none;
}

.visual-display--presentation-swatch .visual-display__image {
  object-fit: cover;
}


/* Swatch Styles */

.facets__visual-display-wrapper:has(.swatch-brightness--dark) .icon-checkmark {
  color: #ffffff;
}

.facets__visual-display-wrapper .swatch {
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  max-width: 100%;
  background-size: 100% !important;
  background-origin: border-box;
  border: 1px solid rgba(var(--color-foreground-rgb),0.5);
}

.facets__visual-display-wrapper .swatch--square {
  border-radius: 0;
}

.facets__visual-display-wrapper .swatch--unavailable {
  border-style: dashed;
  border-color: rgba(var(--color-foreground-rgb), 0.5);
}

input[type='checkbox']:checked + label .swatch {
  outline: 0px solid;
  outline-offset: 2px;
}