@use "tokens" as *;

// Editor WYSIWYG (TipTap). Enmarcado como los demás campos de formulario.
.rich-text {
  border: 1px solid $input-border;
  border-radius: $input-radius;
  background: $input-bg;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;

  &:focus-within {
    border-color: $input-border-focus;
    box-shadow: $input-focus-ring;
  }

  &--disabled { opacity: $disabled-opacity; pointer-events: none; }

  &__toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    padding: $space-1;
    border-bottom: 1px solid $border;
    background: $surface-2;
  }

  &__tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: $radius-sm;
    background: transparent;
    color: $text-2;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;

    &:hover:not(:disabled) { background: $ui-hover-bg; color: $text-1; }
    &--active { background: $accent-100; color: $accent-600; }
    &:disabled { opacity: 0.5; cursor: not-allowed; }
  }

  &__sep {
    width: 1px;
    height: 20px;
    background: $border;
    margin: 0 $space-1;
  }

  // El toggle de HTML se ancla a la derecha de la barra.
  &__tool--source { margin-left: auto; }

  // Modo HTML: edición directa del código.
  &__source {
    display: block;
    width: 100%;
    min-height: 160px;
    padding: $input-padding-y $input-padding-x;
    border: none;
    background: $surface;
    color: $text-1;
    font-family: $k-font-mono;
    font-size: $fs-13;
    line-height: 1.5;
    resize: vertical;
    outline: none;
  }

  // Franjas del editor (URL del enlace, iconos): EN FLUJO entre la toolbar y
  // el contenido — nada flota, así que dentro de un modal quedan siempre a la
  // vista enteras. Mismo fondo que la toolbar, de la que son una extensión.
  &__link-bar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: $space-1;
    border-bottom: 1px solid $border;
    background: $surface-2;
  }

  &__link-input {
    flex: 1;
    min-width: 0;
    height: 30px;
    padding: 0 $space-2;
    border: 1px solid $input-border;
    border-radius: $radius-sm;
    background: $input-bg;
    color: $input-text;
    font-size: $fs-13;

    &:focus {
      outline: none;
      border-color: $input-border-focus;
      box-shadow: $input-focus-ring;
    }
  }

  &__icons {
    display: grid;
    // A todo el ancho del editor: caben muchos más iconos por fila que en el
    // popover de 5 columnas de antes; si aun así no entran, scroll propio.
    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
    gap: 2px;
    max-height: 200px;
    overflow-y: auto;
    padding: $space-1;
    border-bottom: 1px solid $border;
    background: $surface-2;
  }

  &__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 4px;
    border: none;
    border-radius: $radius-sm;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.15s;

    &:hover { background: $ui-hover-bg; }
    img { width: 100%; height: 100%; object-fit: contain; }
  }

  &__content {
    .ProseMirror {
      min-height: 120px;
      padding: $input-padding-y $input-padding-x;
      color: $input-text;
      font-size: $fs-14;
      line-height: $k-lh-body;
      outline: none;

      > * + * { margin-top: 0.6em; }
      h2 { font-size: $fs-18; font-weight: $k-fw-semibold; }
      h3 { font-size: $fs-16; font-weight: $k-fw-semibold; }
      h4, h5 { font-size: $fs-14; font-weight: $k-fw-semibold; }
      ul, ol { padding-left: 1.4em; }
      ul { list-style: disc; }
      ol { list-style: decimal; }
      a { color: $accent-500; text-decoration: underline; }
      blockquote {
        padding-left: $space-3;
        border-left: 3px solid $border-strong;
        color: $text-2;
        font-style: italic;
      }

      // Tabla: visible y editable (bordes finos, cabecera destacada). Sin
      // resize de columnas (Table.configure resizable:false), así que no
      // hace falta CSS para la asa.
      table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;

        td, th {
          min-width: 1em;
          padding: $space-1 $space-2;
          border: 1px solid $border-strong;
          vertical-align: top;
        }

        th {
          background: $surface-2;
          font-weight: $k-fw-semibold;
          text-align: left;
        }

        .selectedCell {
          background: color-mix(in srgb, $accent-500 12%, transparent);
        }
      }

      // Iconos insertados: en línea con el texto.
      img.rt-icon {
        display: inline-block;
        width: 1.2em;
        height: 1.2em;
        vertical-align: -0.24em;
        margin: 0 1px;
      }

      p.is-editor-empty:first-child::before {
        content: attr(data-placeholder);
        color: $input-placeholder;
        float: left;
        height: 0;
        pointer-events: none;
      }
    }
  }
}