@use "tokens" as *;

// Selector de color (portado de kontuan).
.palette-color-picker {
  display: flex;
  flex-direction: column;
  gap: $space-1;

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

  &__grid {
    display: flex;
    flex-wrap: wrap;
    gap: $space-2;
  }

  &__swatch {
    --swatch-color: #64748b;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: $radius-sm;
    background: var(--swatch-color);
    color: #fff;
    cursor: pointer;
    transition: box-shadow 0.15s, border-color 0.15s;

    // Realce al hover: SOLO halo (sombra), nunca transform — el
    // scale(1.06) de antes rasterizaba el swatch (y sus 2px de borde) en
    // fracciones de píxel durante la transición: al pasear el ratón por
    // el formulario del modal de bloque la fila entera «bailaba» y los
    // bordes finos vecinos parpadeaban (peor aún con zoom/DPI
    // fraccionario). El halo se pinta fuera de la caja y no toca ni
    // layout ni raster de los vecinos.
    // (el seleccionado conserva su anillo: el halo solo aplica sin marcar)
    &:hover:not(#{&}--selected) {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--swatch-color) 40%, transparent);
    }

    &--custom-idle:hover:not(#{&}--selected) {
      box-shadow: 0 0 0 3px color-mix(in srgb, #3b82f6 40%, transparent);
    }

    &--selected { box-shadow: 0 0 0 2px $surface, 0 0 0 4px var(--swatch-color); }

    // Preset DINÁMICO del tema (token:* → var(--token), resuelto con el
    // tema ACTUAL): borde siempre visible (su color puede confundirse con
    // la superficie del formulario) y check en color de texto del tema (el
    // blanco fijo desaparecía sobre las superficies claras). El anillo de
    // selección en color de texto, como el custom: con el swatch del color
    // del fondo, el anillo del propio color no se veía.
    &--dynamic {
      border-color: $border-strong;
      color: $text-1;
    }

    &--dynamic#{&}--selected {
      box-shadow: 0 0 0 2px $surface, 0 0 0 4px $text-1;
    }

    &--custom { overflow: hidden; }

    &--custom-idle {
      background: linear-gradient(135deg, #facc15 0%, #3b82f6 50%, #ef4444 100%);
    }

    &--custom-idle#{&}--selected {
      box-shadow: 0 0 0 2px $surface, 0 0 0 4px $text-1;
    }
  }

  &__swatch-check {
    position: absolute;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.35));
  }

  &__swatch-pipette { color: #000; pointer-events: none; }

  &__swatch-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border: none;
    padding: 0;
    cursor: pointer;
  }
}