/* color inputs */

input[type='color'] {
  /* scoped properties */
  --color-input-background-color: var(--hiq-color-input-background-color, var(--hiq-color-gray-6, hsl(220, 10%, 90%)));

  padding: 0;
  border: 0;
  border-radius: 0.2rem;
  background: var(--color-input-background-color);
  appearance: none;
  cursor: pointer;

  &:focus {
    outline: var(--hiq-outline-color, hsl(210, 100%, 85%)) solid var(--hiq-outline-width, 0.2rem);
  }

  &:disabled,
  &[aria-disabled] {
    cursor: not-allowed;
  }

  &::-webkit-color-swatch-wrapper {
    padding: 0.25rem;
  }

  &::-webkit-color-swatch {
    border: 0;
    border-radius: 0.1rem;
  }

  &::-moz-color-swatch {
    border: 0;
    border-radius: 0.1rem;
  }
}