/* DEV: Vendored verbatim copy of @gomining/ds-ui (input/styles.css),
   pinned to the installed v2.1.x. Served statically at /docs/ds/input.css
   for the partner docs page. Do not edit by hand — re-copy from node_modules. */
/* =====================================================================
   GmInputComponent — Input Compact (по Figma)
   Selectors: gm-input, gm-input-label, gm-input-hint, gm-input-error,
              gm-input-balance, [gmInputPrefix], [gmInputSuffix],
              [gmInputHeaderTrailing], [gmInputInfo]
   Global stylesheet (no encapsulation).
   ===================================================================== */

/* ===== Host ===== */

gm-input {
  display: block;

  /* Sizing — fallback `md` (one size in Figma; готово к sm/lg в токенах) */
  --_gm-input-height: var(--gm-input-height-md);
  --_gm-input-padding-x: var(--gm-input-padding-x-md);
  --_gm-input-padding-y: var(--gm-input-padding-y-md);
  --_gm-input-radius: var(--gm-input-radius-md);
  --_gm-input-shell-gap: var(--gm-input-shell-gap-md);

  /* Surface — fallback default state */
  --_gm-input-bg: var(--gm-input-bg-default);
  --_gm-input-stroke: var(--gm-input-stroke-default);
  --_gm-input-subtext-color: var(--gm-input-hint-color);
}

/* ===== State variants ===== */

gm-input[variant='valid'] {
  --_gm-input-bg: var(--gm-input-bg-valid);
  --_gm-input-stroke: var(--gm-input-stroke-valid);
  --_gm-input-subtext-color: var(--gm-input-valid-color);
}

gm-input[variant='error'] {
  --_gm-input-bg: var(--gm-input-bg-error);
  --_gm-input-stroke: var(--gm-input-stroke-error);
  --_gm-input-subtext-color: var(--gm-input-error-color);
}

/* Focus — only override stroke when neutral state (valid/error keep their color). */
gm-input:has(input:focus-visible):not([variant='valid']):not([variant='error']) {
  --_gm-input-stroke: var(--gm-input-stroke-focus);
}

/* Disabled — auto from native `<input disabled>` */
gm-input:has(input:disabled) {
  --_gm-input-bg: var(--gm-input-bg-disabled);
}

/* ===== Header ===== */

gm-input .gm-input-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gm-input-header-trailing-gap);
  margin-bottom: var(--gm-input-header-shell-gap);
}

/* Скрыть header целиком если нет ни label, ни trailing (avoid empty gap). */
gm-input .gm-input-header:empty {
  display: none;
  margin-bottom: 0;
}

/* ===== Shell ===== */

gm-input .gm-input-shell {
  display: flex;
  align-items: center;
  gap: var(--_gm-input-shell-gap);
  height: var(--_gm-input-height);
  padding: var(--_gm-input-padding-y) var(--_gm-input-padding-x);
  background-color: var(--_gm-input-bg);
  border: var(--gm-input-stroke-width) solid var(--_gm-input-stroke);
  border-radius: var(--_gm-input-radius);
  transition:
    background-color var(--gm-transition-base),
    border-color var(--gm-transition-base);
}

/* Native input inside shell — strip default styles, inherit typography. */
gm-input .gm-input-shell input {
  flex: 1 1 auto;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0;
  font-family: var(--gm-font-family-ui);
  font-size: var(--gm-font-size-md);
  line-height: var(--gm-line-height-md);
  font-weight: var(--gm-font-weight-regular);
  color: var(--gm-input-text);
}

gm-input .gm-input-shell input::placeholder {
  color: var(--gm-input-placeholder);
}

gm-input .gm-input-shell input:disabled {
  color: var(--gm-input-text-disabled);
  cursor: not-allowed;
}

/* ===== Subtext (hint / error) ===== */

gm-input gm-input-hint,
gm-input gm-input-error {
  display: block;
  margin-top: var(--gm-input-shell-subtext-gap);
  font-family: var(--gm-font-family-ui);
  font-size: var(--gm-font-size-sm);
  line-height: var(--gm-line-height-sm);
  font-weight: var(--gm-font-weight-regular);
}

gm-input gm-input-hint {
  color: var(--_gm-input-subtext-color);
}

gm-input gm-input-error {
  display: none;
  color: var(--gm-input-error-color);
}

/* В error state — error видим, hint скрыт. */
gm-input[variant='error'] gm-input-hint {
  display: none;
}

gm-input[variant='error'] gm-input-error {
  display: block;
}

/* ===== Label ===== */

gm-input-label {
  display: inline-flex;
  flex: 1 1 auto;
  min-width: 0;
}

gm-input-label label {
  display: inline-flex;
  align-items: center;
  gap: var(--gm-input-label-info-gap);
  margin: 0;
  font-family: var(--gm-font-family-ui);
  font-size: var(--gm-font-size-md);
  line-height: var(--gm-line-height-md);
  font-weight: var(--gm-font-weight-medium);
  color: var(--gm-input-label-color);
}

/* ===== Info button ===== */

[gmInputInfo] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--gm-input-info-button-size);
  height: var(--gm-input-info-button-size);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--gm-input-info-color);
}

[gmInputInfo]:focus-visible {
  outline: var(--gm-ui-btn-focus-outline-width) solid var(--gm-color-purple);
  outline-offset: var(--gm-input-info-focus-offset);
  border-radius: var(--gm-radius-full);
}

/* ===== Header trailing slot ===== */

[gmInputHeaderTrailing] {
  display: inline-flex;
  align-items: center;
  gap: var(--gm-input-header-trailing-gap);
}

/* ===== Balance helper ===== */

gm-input-balance {
  display: inline-flex;
  align-items: center;
  gap: var(--gm-input-header-trailing-gap);
  font-family: var(--gm-font-family-ui);
  font-size: var(--gm-font-size-sm);
  line-height: var(--gm-line-height-sm);
  font-weight: var(--gm-font-weight-medium);
}

gm-input-balance .gm-input-balance__icon {
  color: var(--gm-input-balance-icon-color);
}

gm-input-balance .gm-input-balance__amount {
  color: var(--gm-input-balance-amount-color);
}

gm-input-balance .gm-input-balance__max {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--gm-input-balance-max-color);
  font: inherit;
}

gm-input-balance .gm-input-balance__max:focus-visible {
  outline: var(--gm-ui-btn-focus-outline-width) solid var(--gm-color-purple);
  outline-offset: var(--gm-input-balance-focus-offset);
  border-radius: var(--gm-radius-sm);
}

/* ===== Error state — header trailing tone-shift =====
   По Figma: при error wallet-icon + amount красные, Max остаётся purple. */

gm-input[variant='error'] gm-input-balance .gm-input-balance__icon,
gm-input[variant='error'] gm-input-balance .gm-input-balance__amount {
  color: var(--gm-input-error-color);
}

/* ===== Adornments — left/right inside shell ===== */

[gmInputPrefix],
[gmInputSuffix] {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--gm-color-grey);
}

/* Dark-theme переопределения живут в tokens.css:
   --gm-input-text / --gm-input-label-color / --gm-input-bg-disabled. */