@use "tokens" as *;

.edc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: $space-2;
  min-height: $input-height; // misma altura que los inputs del motor (36px)
  padding: $space-1 $space-4;
  border: 1px solid transparent;
  border-radius: $radius-md;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;

  &:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
  }

  &__icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
  }

  &__text {
    display: inline-flex;
    align-items: center;
    gap: $space-2;
    line-height: 1;
  }

  // Con slot de icono (patrón kontuan): fila por defecto en todas partes;
  // SOLO cuando el contenedor `content` (el área de contenido) es estrecho,
  // el texto pasa a mini-etiqueta bajo el icono.
  &--has-icon:not(.edc-button--text):not(.edc-button--text-danger) {
    @container content (max-width: #{$bp-sm - 1px}) {
      flex-direction: column;
      gap: 2px;
      padding: $space-1 $space-2;

      .edc-button__text {
        font-size: 10px;
        line-height: 1;
      }
    }
  }

  // Relleno de color: el texto NO es fijo — claro u oscuro según el fondo
  // real (contrast-text de tokens), que el acento lo elige el usuario.
  &--primary {
    background: $color-accent;
    @include contrast-text($color-accent);

    // Hover bien visible: accent-600 apenas se distingue del 500.
    &:hover:not(:disabled) {
      background: color-mix(in srgb, $color-accent 72%, black);
      @include contrast-text(color-mix(in srgb, $color-accent 72%, black));
    }
  }

  &--secondary {
    background: transparent;
    border-color: $color-border;
    color: $color-text;

    &:hover:not(:disabled) {
      background: color-mix(in srgb, $color-accent 14%, transparent);
      border-color: $color-accent;
    }
  }
}

// Botón tipo TEXTO (kontuan): sin fondo, sin borde ni padding; solo color.
.edc-button--text {
  background: transparent;
  border-color: transparent;
  min-height: 0;
  padding: 0;
  color: $accent-500;

  &:hover:not(:disabled) { color: $accent-700; background: transparent; }
}
.edc-button--text-danger {
  background: transparent;
  border-color: transparent;
  min-height: 0;
  padding: 0;
  color: $danger;

  &:hover:not(:disabled) {
    color: color-mix(in srgb, $danger 80%, black);
    background: transparent;
  }
}

// Variantes semánticas rellenas: mismo criterio que --primary, el texto lo
// decide el fondo (antes iba fijado a mano y a veces no contrastaba).
@each $variant, $color in (danger: $danger, success: $success, info: $info, warning: $warning) {
  .edc-button--#{$variant} {
    background: $color;
    @include contrast-text($color);

    &:hover:not(:disabled) {
      background: color-mix(in srgb, #{$color} 72%, black);
      @include contrast-text(color-mix(in srgb, #{$color} 72%, black));
    }
  }
}