/* components/field/field.css — Field (doc, Componentes > Field). 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-fieldGap: var(--ms-spacingRole_part);
    --ms-fieldLabelTextStyle_family: var(--ms-textStyle_labelM_family);
    --ms-fieldLabelTextStyle_size: var(--ms-textStyle_labelM_size);
    --ms-fieldLabelTextStyle_lineHeight: var(--ms-textStyle_labelM_lineHeight);
    --ms-fieldLabelTextStyle_weight: var(--ms-textStyle_labelM_weight);
    --ms-fieldHintTextStyle_family: var(--ms-textStyle_bodyS_family);
    --ms-fieldHintTextStyle_size: var(--ms-textStyle_bodyS_size);
    --ms-fieldHintTextStyle_lineHeight: var(--ms-textStyle_bodyS_lineHeight);
    --ms-fieldHintTextStyle_weight: var(--ms-textStyle_bodyS_weight);
  }

  /* Field */
  .ms-field {
    display: flex;
    flex-direction: column;
    gap: var(--ms-fieldGap);
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }
  /* legend como un hijo más, para que la separación la ponga fieldGap */
  .ms-field > legend { float: inline-start; inline-size: 100%; padding: 0; }
  .ms-field > :where(label, legend) {
    color: var(--ms-color_content);
    font-family: var(--ms-fieldLabelTextStyle_family); font-size: var(--ms-fieldLabelTextStyle_size); line-height: var(--ms-fieldLabelTextStyle_lineHeight); font-weight: var(--ms-fieldLabelTextStyle_weight);
  }
  .ms-field > :where(label, legend) > [data-ms-scheme] { color: var(--ms-color_mainContent); }
  .ms-field > [data-ms-slot="hint"], .ms-field > [data-ms-slot="error"] {
    margin: 0;
    color: var(--ms-color_content);
    font-family: var(--ms-fieldHintTextStyle_family); font-size: var(--ms-fieldHintTextStyle_size); line-height: var(--ms-fieldHintTextStyle_lineHeight); font-weight: var(--ms-fieldHintTextStyle_weight);
  }
  .ms-field > [data-ms-slot="error"] { display: none; align-items: center; gap: var(--ms-spacing_4); color: var(--ms-color_mainContent); }
  .ms-field > [data-ms-slot="error"]::before {
    content: "";
    flex: none;
    inline-size: var(--ms-iconSize_s);
    block-size: var(--ms-iconSize_s);
    background-color: currentColor;
    mask-image: var(--ms-icon_error);
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    forced-color-adjust: none;
  }
  .ms-field[data-ms-scheme="error"] > [data-ms-slot="error"] { display: flex; }
  .ms-field[data-ms-scheme="error"] > [data-ms-slot="hint"] { display: none; }
  /* Deshabilitado: el Field se atenúa si su control lo está (no por un <select> oculto de ms-select ni por un día fuera de rango) */
  .ms-field:is(:disabled, :has(> :is(input, textarea):disabled, > .ms-input > input:disabled, > :is(ms-select, ms-date-picker)[disabled], > :is(ms-search-field, ms-range, ms-file-upload) input:disabled)) > :where(label, legend, [data-ms-slot="hint"]) { opacity: var(--ms-opacityRole_disabled); }
}