@layer ui-reset, ui;

/* color-swatch */
@layer ui {
  @property --mask-position {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 66%;
  }

  fieldset.color-swatch {
    gap: var(--ui-spacing-2);
    border: none;
    display: inline-flex;

    & input[type="radio"], & input[type="checkbox"] {
      --size: calc(20 / 14 * 1rem);
      appearance: none;
      isolation: isolate;
      width: var(--size);
      height: var(--size);
      aspect-ratio: 1;
      border-radius: var(--ui-rounded-full);
      background: var(--swatch-color, var(--ui-neutral-300));
      box-shadow: none;
      --mask-position: 59%;
      mask-image: radial-gradient(black, black var(--mask-position), transparent var(--mask-position), transparent 59%, black 59%);
      transition: scale var(--ease-glide-1),
      translate .1s ease-out,
      --mask-position var(--mask-transition, var(--ease-glide-3));
      flex-shrink: 0;
      position: relative;

      &:checked {
        --mask-transition: var(--ease-snap-2);
        --mask-position: 50%;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3l7 -7' fill='none' stroke='none' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5 10.5l3 3l7 -7' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
          no-repeat center / 50%,
        var(--swatch-color, var(--ui-neutral-300));
        box-shadow: none;
        scale: 1.15;
        mask-position: center;
        mask-size: 100% 100%;
        mask-repeat: no-repeat;
      }

      &:focus-visible {
        border-radius: var(--ui-rounded-full);
        outline: 2px solid var(--ui-neutral-950);
        outline-offset: 3px;
      }

      @media (hover: hover) {
        &:hover:not(:checked) {
          scale: 1.1;
        }
      }

      &:active {
        translate: 0 1px;
      }

      &:disabled {
        opacity: .4;
        cursor: default;
      }
    }
  }

  span.color-swatch {
    aspect-ratio: 1;
    border-radius: var(--ui-rounded-full);
    background-color: var(--swatch-color, var(--ui-neutral-300));
    flex-shrink: 0;
    width: 1.42857rem;
    display: inline-block;
  }
}