.x-color {
  :where(input) {
    transition-property: var(--default-transition-property);
    transition-timing-function: var(--ease-in-out);
    transition-duration: var(--default-transition-duration);

    &:disabled {
      cursor: not-allowed;

      &::before,
      &::after {
        opacity: var(--x-color-disabled-opacity, 50%);
      }
    }

    &:enabled {
      &:hover {
        --x-color-outline-color-opacity: var(--x-color-hover-outline-color-opacity);
        --x-color-outline-offset: var(--x-color-hover-outline-offset);
      }

      &:focus-visible {
        --x-color-outline-color-opacity: var(--x-color-focus-outline-color-opacity, 100%);
        --x-color-outline-offset: var(--x-color-focus-outline-offset, 3px);
      }

      &:checked {
        --x-color-outline-color-opacity: var(--x-color-checked-outline-color-opacity, 100%);
        --x-color-outline-offset: var(--x-color-focus-outline-offset, 3px);

        &:focus-visible {
          outline-style: dashed;
        }
      }
    }
  }
}