.nano-input {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  line-height: var(--leading-normal);
  color: hsl(var(--color-foreground));
  background-color: hsl(var(--color-background));
  border: 1px solid hsl(var(--color-input));
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default);

  &::placeholder {
    color: hsl(var(--color-muted-foreground));
  }

  &:focus {
    border-color: hsl(var(--color-input-focus));
    outline: 2px solid hsl(var(--color-input-focus));
    outline-offset: -1px;
  }

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

  &.nano-input--error,

  &[aria-invalid="true"] {
    border-color: hsl(var(--color-destructive));

    &:focus {
      border-color: hsl(var(--color-destructive));
      outline: 2px solid hsl(var(--color-destructive));
      outline-offset: -1px;
    }
  }
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"],
textarea {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  line-height: var(--leading-normal);
  color: hsl(var(--color-foreground));
  background-color: hsl(var(--color-background));
  border: 1px solid hsl(var(--color-input));
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default);

  &::placeholder {
    color: hsl(var(--color-muted-foreground));
  }

  &:focus {
    border-color: hsl(var(--color-input-focus));
    outline: 2px solid hsl(var(--color-input-focus));
    outline-offset: -1px;
  }

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

textarea.nano-input,
textarea {
  min-height: 5rem;
  resize: vertical;
}

.nano-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);

  .nano-field__error {
    font-size: var(--text-sm);
    color: hsl(var(--color-destructive));
  }
}

.nano-input-group {
  display: flex;
  align-items: stretch;

  .nano-input,
  .nano-btn {
    min-height: 2.5rem;
  }

  .nano-input {
    flex: 1 1 auto;
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .nano-btn {
    flex: 0 0 auto;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}