input[type='color'] {
  display: block;
  border-radius: calc(infinity * 1px);
  background: transparent;
  padding: var(--wa-form-control-border-width);
  width: calc(var(--wa-form-control-height) - 2px);
  height: calc(var(--wa-form-control-height) - 2px);
  border: var(--wa-form-control-border-width) var(--wa-border-style) var(--wa-form-control-border-color);
  cursor: pointer;
  forced-color-adjust: none;

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

  &::-webkit-color-swatch {
    border: none;
    border-radius: inherit;
  }

  &::-moz-color-swatch {
    border: none;
    border-radius: inherit;
  }

  &:focus-visible {
    outline: var(--wa-focus-ring);
    outline-offset: var(--wa-focus-ring-offset);
  }
}
