@use "tokens" as *;

// Zona de subida con arrastrar-y-soltar (portado de kontuan).
.image-upload {
  display: flex;
  flex-direction: column;
  gap: $space-1;

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

  &__input { display: none; }

  &__zone {
    position: relative;
    display: flex;
    // Centrado EN EL CAMPO: horizontal siempre, y vertical cuando el
    // contenedor le da alto extra (p. ej. el grupo a dos columnas del form
    // de bloque) — los márgenes auto solo absorben espacio si lo hay.
    align-self: center;
    margin-block: auto;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 160px;
    border: 2px dashed $border;
    border-radius: $radius-md;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s, background-color 0.15s;

    &:hover:not(.image-upload__zone--has-image) {
      border-color: $border-strong;
      background-color: $surface-2;
    }
    &--dragging {
      border-color: $accent-500;
      background-color: color-mix(in srgb, $accent-500 8%, transparent);
    }
    &--has-image { border-style: solid; cursor: default; }
    &--error { border-color: $danger; }
  }

  &__preview {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: $space-2;
  }

  &__remove {
    position: absolute;
    top: $space-1;
    right: $space-1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: $radius-sm;
    background-color: color-mix(in srgb, $surface 70%, transparent);
    color: $text-1;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;

    &:hover {
      color: $danger;
      background-color: color-mix(in srgb, $danger 12%, $surface);
    }
  }

  &__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: $space-1;
    padding: $space-3;
    text-align: center;
  }

  &__icon { width: 32px; height: 32px; color: $text-3; }
  &__text { font-size: $fs-12; color: $text-2; }

  // Nombre del fichero (pendiente o guardado) bajo la miniatura, centrado
  // con ella.
  &__name {
    align-self: center;
    max-width: 160px;
    overflow: hidden;
    font-size: $fs-12;
    color: $text-3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

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