/* components/input/input.css — Input (doc, Componentes > Input). Se carga después de style.css. */
@layer ms.system, ms.theme, ms.attributes;

@layer ms.system {
  /* Alias: valor por defecto; un Tema lo cambia en ms.theme */
  :root {
    --ms-inputRadius: var(--ms-radiusRole_control);
    --ms-inputBorderWidth: var(--ms-strokeRole_outline);
    --ms-inputBorderWidthFocus: var(--ms-strokeRole_indicator);
    --_ms-inputPaddingX: var(--ms-spacing_16);
    --_ms-inputPaddingY: var(--ms-spacing_16);
    --ms-inputGap: var(--ms-spacingRole_iconText);
    --ms-inputTextStyle_family: var(--ms-textStyle_bodyL_family);
    --ms-inputTextStyle_size: var(--ms-textStyle_bodyL_size);
    --ms-inputTextStyle_lineHeight: var(--ms-textStyle_bodyL_lineHeight);
    --ms-inputTextStyle_weight: var(--ms-textStyle_bodyL_weight);
  }

  /* Input y Textarea: la caja; el <input> de adentro no tiene caja propia */
  .ms-input, .ms-textarea {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--ms-inputGap);
    inline-size: 100%;
    margin: 0;
    /* El borde es el stroke de frame (--_ms-frameStroke), que crece en selected. El relleno
       descuenta lo que crece, para que el contenido no se mueva. */
    --_ms-frameWidth: var(--ms-inputBorderWidth);
    --_ms-frameSelectedWidth: var(--ms-inputBorderWidthFocus);
    --_ms-inputFrameGrow: calc(var(--_ms-frameStroke, var(--ms-inputBorderWidth)) - var(--ms-inputBorderWidth));
    padding: calc(var(--_ms-inputPaddingY) - var(--_ms-inputFrameGrow)) calc(var(--_ms-inputPaddingX) - var(--_ms-inputFrameGrow));
    border-style: solid;
    border-width: var(--_ms-frameStroke, var(--ms-inputBorderWidth));
    border-color: var(--ms-color_border);
    border-radius: var(--ms-inputRadius);
    background: var(--ms-color_canvas);
    color: var(--ms-color_content);
    font-family: var(--ms-inputTextStyle_family); font-size: var(--ms-inputTextStyle_size); line-height: var(--ms-inputTextStyle_lineHeight); font-weight: var(--ms-inputTextStyle_weight);
    text-align: start;
  }
  /* Un campo de una línea mide lo mismo que un Button m: el alto lo da la medida, no el relleno */
  .ms-input { min-block-size: var(--_ms-controlHeight_m); padding-block: 0; }
  .ms-input > :where(input) {
    flex: 1 1 auto;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    outline: none;
  }
  /* Search field trae su propio botón de borrar: se oculta el del navegador. */
  .ms-input::placeholder, .ms-textarea::placeholder, .ms-input > input::placeholder {
    color: color-mix(in oklab, var(--ms-color_content) var(--ms-opacityRole_placeholder), transparent);
    opacity: 1;
  }
  .ms-input > .ms-icon { color: var(--ms-color_content); }
  .ms-input > .ms-button { margin-block: calc(-1 * var(--ms-spacing_4)); padding: var(--ms-spacing_4); }
  /* El anillo de foco del sistema va en la caja */
  .ms-input:has(> input:focus-visible) {
    outline: var(--ms-focusRingWidth) solid var(--ms-color_focus);
    outline-offset: var(--ms-focusRingOffset);
  }
  /* underline: el stroke solo abajo, sin radio. Arriba suma lo que crece el stroke, para que
     el contenido quede centrado */
  :is(.ms-input, .ms-textarea)[data-ms-variant="underline"] {
    border-width: 0 0 var(--_ms-frameStroke, var(--ms-inputBorderWidth));
    border-radius: 0;
    padding-inline: var(--_ms-inputPaddingX);
  }
  .ms-input[data-ms-variant="underline"] { padding-block: var(--_ms-inputFrameGrow) 0; }
  /* Error: el Field en el Esquema error pinta el borde con su color_main */
  :is(.ms-field[data-ms-scheme="error"], [aria-invalid="true"]) :is(.ms-input, .ms-textarea),
  :is(.ms-input, .ms-textarea):is([aria-invalid="true"], :has([aria-invalid="true"])) { border-color: var(--ms-color_mainContent); }
  /* Deshabilitado */
  :is(.ms-input, .ms-textarea):is(:disabled, :has(> :disabled)) { opacity: var(--ms-opacityRole_disabled); cursor: not-allowed; }
  :is(.ms-input, .ms-textarea):is(:disabled, :has(> :disabled)):hover { border-color: var(--ms-color_border); }

  /* Interactions (doc, Interactions > Alias de componente): su variante de action por defecto, después de su estilo */
  /* @generated interactions:component — node designSystem/interactions.js. No se edita a mano. */
  /* inputAction: frame */
  :is(.ms-input, .ms-textarea) { border-color: var(--_ms-frameRest, var(--ms-color_border)); --_ms-frameStroke: var(--_ms-frameWidth, var(--ms-strokeRole_outline)); transition: border-color var(--ms-motionDuration_fast) var(--ms-motionBezier_ease); }
  :is(.ms-input, .ms-textarea):is(:hover, [data-ms-active]):not(:disabled, [aria-disabled="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate) { border-color: var(--ms-color_mainContent); }
  :is(.ms-input, .ms-textarea):is([aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate), :is(.ms-input, .ms-textarea):is(input, textarea):focus, :is(.ms-input, .ms-textarea):has(:is(input:not([type="file"], [type="checkbox"], [type="radio"], [type="range"]), textarea):focus, [aria-expanded="true"]) { border-color: var(--ms-color_mainContent); --_ms-frameStroke: var(--_ms-frameSelectedWidth, var(--ms-strokeRole_indicator)); }
  /* @end interactions:component */
}