.input {
  display: flex;
  width: 100%;
  height: calc(var(--spacing) * 9);
  padding-inline: calc(var(--spacing) * 3);
  transition: all var(--default-transition-duration)
    var(--default-transition-timing-function);
  border: 1px solid var(--color-input);
  border-radius: var(--radius-md);
  outline: none;
  background-color: transparent;
  box-shadow: var(--shadow-xs);
  color: var(--color-foreground);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);

  /* Invalid */
  &[aria-invalid="true"] {
    border-color: var(--color-destructive);
  }

  /* Placeholder */
  &::placeholder {
    color: var(--color-muted-foreground);
  }

  /* Selection */
  &::selection {
    background-color: var(--color-primary);
    color: var(--color-primary-foreground);
  }

  /* Upload */
  &::file-selector-button {
    height: 100%;
    border: none;
    background-color: transparent;
    color: var(--color-foreground);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
  }

  /* Disabled */
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Focus */
  &:focus {
    &:not([aria-invalid="true"]) {
      border-color: var(--color-ring);
      box-shadow: 0 0 0 3px
        color-mix(in oklab, var(--color-ring) 50%, transparent);
    }

    &[aria-invalid="true"] {
      box-shadow: 0 0 0 3px
        color-mix(in oklab, var(--color-destructive) 20%, transparent);
    }
  }
}

:global(.dark) {
  .input {
    background-color: color-mix(in oklab, var(--color-input) 30%, transparent);
  }
}
