/* selector for non-writable inputs */
@custom-selector :--not-writable
  :disabled,
  [aria-disabled],
  [readonly];

/* input mixin */
@define-mixin input {
  /* remove default browser appearance */
  @mixin is-controlled;

  margin: 0;
  border: var(--hiq-input-border-width) solid var(--hiq-input-border-color);
  border-radius: var(--hiq-input-border-radius);
  background-color: var(--hiq-input-background-color);
  font-family: inherit;
  font-size: inherit;
  font-weight: var(--hiq-font-weight-base);
  line-height: inherit;
  color: var(--hiq-input-text-color);
  transition: border-color var(--hiq-speed) var(--hiq-easing), color var(--hiq-speed) var(--hiq-easing), background-color var(--hiq-speed) var(--hiq-easing);

  &::placeholder {
    color: var(--hiq-input-placeholder-color);
  }

  &:hover {
    border-color: var(--hiq-input-hover-border-color);
    background-color: var(--hiq-input-hover-background-color);
    color: var(--hiq-input-hover-text-color);
  }

  &:focus {
    border-color: var(--hiq-input-focus-border-color);
    background-color: var(--hiq-input-focus-background-color);
    outline: var(--hiq-outline-color) solid var(--hiq-outline-width);
    color: var(--hiq-input-focus-text-color);
  }

  &:--not-writable {
    border-color: var(--hiq-disabled-border-color);
    background-color: var(--hiq-disabled-background-color);
    color: var(--hiq-disabled-text-color);

    &::placeholder {
      color: var(--hiq-disabled-text-color);
    }
  }

  &:disabled {
    cursor: not-allowed;
  }

  &:required:invalid:not(:focus) {
    border-color: var(--hiq-input-invalid-border-color);
  }

  &:required:valid:not(:focus) {
    border-color: var(--hiq-input-valid-border-color);
  }
}
