@layer ui-reset, ui;

/* color-input */
@layer ui {
  input[type="color"] {
    appearance: none;
    border-radius: var(--ui-rounded-3);
    border: 1px solid var(--ui-neutral-200);
    cursor: pointer;
    background: none;
    width: 2.25rem;
    height: 2.25rem;
    padding: .2rem;

    &::-webkit-color-swatch-wrapper {
      padding: 0;
    }

    &::-webkit-color-swatch {
      border-radius: var(--ui-rounded-2);
      border: none;
    }

    &::-moz-color-swatch {
      border-radius: var(--ui-rounded-2);
      border: none;
    }

    &:focus-visible {
      outline: 2px solid var(--ui-neutral-950);
      outline-offset: 2px;
    }
  }
}