@mixin sizes() {
  &--sm {
    font-size: var(--cmm-font-size-sm);
    height: 1.75rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  &--md {
    font-size: var(--cmm-font-size-md);
    height: 2.5rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  &--lg {
    font-size: var(--cmm-font-size-md);
    height: 3rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@mixin base() {
  appearance: none;
  border: 1px solid var(--cmm-Input-border);
  border-radius: var(--cmm-radius-lg);
  transition: var(--cmm-transition-bg);
  font-weight: var(--cmm-font-weight-normal);
  outline-offset: 0;
  // Don't use `background` to avoid collision of `background-image` of Select.
  // TODO: Workaround without knowing the internal of a child.
  background-color: var(--cmm-Input-bg);

  &:disabled {
    color: var(--cmm-color-font-muted);
    cursor: not-allowed;
    opacity: 0.6;

    &::placeholder {
      color: var(--cmm-color-font-subtle);
    }
  }

  &::placeholder {
    color: var(--cmm-color-font-subtle);
  }

  &[aria-invalid="true"] {
    border-color: var(--cmm-color-danger-outline-border);
    color: var(--cmm-color-danger-font);
    outline-color: var(--cmm-outline-color-danger);

    &::placeholder {
      // Using `muted` while default color is `subtle`
      // because light danger color may be hard to see.
      // TODO: This decision is depending on the default theme.
      color: var(--cmm-color-danger-muted);
    }
  }
}
