/* Kilo Input / TextField overrides – styled to match Figma design */

[data-component="input"] {
  &[data-variant="normal"] [data-slot="input-label"] {
    font-size: var(--kilo-font-size-12);
    line-height: var(--kilo-font-size-14);
    font-weight: var(--font-weight-regular);
    color: var(--text-base);
  }

  &[data-variant="normal"] [data-slot="input-wrapper"] {
    border-radius: 2px;
    border: 1px solid var(--border-base);
    background: var(--background-weak);
    padding-right: 0;
    transition: border-color 150ms;

    &:hover:not(:has([data-readonly])):not(:has(:disabled)) {
      border-color: var(--border-hover);
    }

    &:focus-within:not(:has([data-readonly])) {
      border-color: var(--border-hover);
      box-shadow: 0 0 0 1px var(--border-focus);
    }

    &:has([data-invalid]) {
      background: var(--background-weak);
      border: 1px solid var(--border-critical-base);
      box-shadow: none;
    }

    &:has(:disabled) {
      opacity: 0.5;
    }
  }

  &[data-variant="normal"] [data-slot="input-input"] {
    min-height: 32px;
    padding: 6px 12px;
    font-size: var(--kilo-font-size-13);
    line-height: var(--kilo-font-size-16);
    font-family: var(--vscode-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    color: var(--text-base);

    &::placeholder {
      color: var(--vscode-input-placeholderForeground, var(--text-weaker));
    }
  }

  &[data-variant="normal"] textarea[data-slot="input-input"] {
    height: auto;
    min-height: 32px;
    padding: 6px 12px;
  }

  &[data-variant="normal"] [data-slot="input-error"] {
    font-size: var(--kilo-font-size-12);
    line-height: var(--kilo-font-size-14);
    font-weight: var(--font-weight-regular);
    color: var(--text-on-critical-base);
  }
}
