@use "tokens" as *;

// Chevron de lucide (`chevron-down`) como máscara: el color lo pone
// `background-color` (mask solo usa el canal alfa del SVG), así que
// funciona igual en claro/oscuro y en cualquier tema de juego.
$icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

// Estilo compartido de los elementos de formulario (portado de kontuan):
// BaseInput, BaseTextarea, BaseSelect y TranslatableInput.
.form-field {
  display: flex;
  flex-direction: column;
  gap: $space-1;
  min-width: 0;

  &__label {
    font-size: $fs-13;
    font-weight: $k-fw-medium;
    color: $text-2;
  }

  &__required { color: $danger; }

  &__input,
  &__textarea,
  &__select {
    width: 100%;
    background-color: $input-bg;
    color: $input-text;
    border: 1px solid $input-border;
    border-radius: $input-radius;
    font-family: $k-font-sans;
    font-size: $fs-14;
    transition: border-color 0.15s, box-shadow 0.15s;

    &::placeholder { color: $input-placeholder; }
    &:hover:not(:disabled):not(:focus) { border-color: $input-border-hover; }
    &:focus {
      outline: none;
      border-color: $input-border-focus;
      box-shadow: $input-focus-ring;
    }
    &:disabled { opacity: $disabled-opacity; cursor: not-allowed; }
  }

  &__input {
    height: $input-height;
    padding: 0 $input-padding-x;
  }

  &__textarea {
    padding: $input-padding-y $input-padding-x;
    line-height: $k-lh-body;
    resize: vertical;
  }

  // Indicador del select: chevron (lucide `chevron-down`) pintado por
  // máscara — así toma el color de $text-3 (claro/oscuro y temas de
  // juego) sin depender de un SVG con el color grabado.
  &__select-wrapper {
    position: relative;
    &::after {
      content: '';
      position: absolute;
      right: $input-padding-x;
      top: 50%;
      width: 16px;
      height: 16px;
      transform: translateY(-50%);
      background-color: $text-3;
      -webkit-mask-image: $icon-chevron-down;
      mask-image: $icon-chevron-down;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-position: center;
      mask-position: center;
      -webkit-mask-size: contain;
      mask-size: contain;
      pointer-events: none;
    }
  }

  &__select {
    height: $input-height;
    padding: 0 ($input-padding-x + 16px) 0 $input-padding-x;
    appearance: none;
    cursor: pointer;
  }

  // MITIGACIÓN del «baile» al hover en el modal de bloque (DPI fraccionario):
  // dentro de un modal, el realce de hover/focus es INSTANTÁNEO. La
  // transición de border-color/box-shadow fuerza ~10 repintados seguidos con
  // un área de invalidación mayor que el propio input (el box-shadow pinta
  // fuera de su caja) y, con las filas del esquema en columnas de ancho
  // fraccional (auto-fit 1fr) y un devicePixelRatio no entero (125%/150%),
  // esa re-rasterización repetida puede hacer temblar los campos VECINOS.
  // Un único repintado por cambio de estado elimina el tembleque sin tocar
  // la geometría ni el aspecto final.
  .modal & {
    &__input,
    &__textarea,
    &__select {
      transition: none;
    }
  }

  &--error &__input,
  &--error &__textarea,
  &--error &__select {
    border-color: $danger;
    &:focus { box-shadow: 0 0 0 3px color-mix(in srgb, #{$danger} 20%, transparent); }
  }

  &__error { font-size: $fs-12; color: $danger; }
  &__hint { font-size: $fs-12; color: $text-3; }
}