/*
 * NOTE: Ajustes do app sobre o editor Lexxy (em desenvolvimento, sujeito a mudanças).
 * O CSS do fornecedor é inserido imediatamente antes deste arquivo em
 * application.bootstrap.scss e usa seletores :where() (especificidade zero),
 * então as regras abaixo sempre vencem. Variáveis disponíveis em
 * node_modules/@37signals/lexxy/dist/stylesheets/lexxy-variables.css.
 * Cada seção é independente e pode ser removida isoladamente.
 */

/* ------------------------------------------------------------
 * Tema: mapeia variáveis do Lexxy para o Bootstrap
 * ------------------------------------------------------------ */
:root {
  --lexxy-font-base: var(--bs-body-font-family);
  --lexxy-font-mono: var(--bs-font-monospace);
  --lexxy-color-ink: var(--bs-body-color);
  --lexxy-color-ink-medium: var(--bs-gray-700);
  --lexxy-color-ink-light: var(--bs-gray-500);
  --lexxy-color-ink-lighter: var(--bs-border-color);
  --lexxy-color-ink-lightest: var(--bs-gray-100);
  --lexxy-color-accent-dark: var(--bs-primary);
  --lexxy-color-link: var(--bs-link-color);
  --lexxy-focus-ring-color: var(--bs-focus-ring-color);
  --lexxy-radius: var(--bs-border-radius-sm);
}

/* ------------------------------------------------------------
 * Toolbar: densidade e estado ativo iguais aos do Trix
 * ------------------------------------------------------------ */
lexxy-toolbar {
  --lexxy-toolbar-button-size: 1.75em;
  --lexxy-toolbar-icon-size: 1em;
  --lexxy-color-selected: var(--bs-light);
  --lexxy-color-selected-hover: var(--bs-gray-200);
}

lexxy-toolbar .lexxy-editor__toolbar-button:hover:not([aria-pressed="true"]):not([aria-disabled="true"]) {
  background-color: var(--bs-light);
}

/* NOTE: o CSS do fornecedor só dimensiona <svg>; os glifos do Bootstrap Icons
   inseridos via lexxy_controller precisam das regras equivalentes */
lexxy-toolbar .lexxy-editor__toolbar-button .bi {
  font-size: var(--lexxy-toolbar-icon-size);
  grid-area: 1 / 1;
  line-height: 1;
}

lexxy-toolbar .lexxy-editor__toolbar-dropdown-list button .bi {
  font-size: 1em;
}

lexxy-toolbar .lexxy-editor__toolbar-button.lexxy-editor__toolbar-button--chevron::after {
  block-size: auto;
  border: 0;
  content: "\f282";
  font-family: bootstrap-icons;
  font-size: 0.75em;
  inline-size: auto;
  line-height: 1;
  transform: none;
}

lexxy-table-tools .lexxy-table-control__button .bi {
  font-size: 1em;
}

/* ------------------------------------------------------------
 * Toolbar afixada (espelha trix-toolbar.trix-sticky)
 * ------------------------------------------------------------ */
lexxy-toolbar.lexxy-sticky {
  position: sticky;
  top: 56px;
  z-index: 1000;
  background-color: white;
}

/* ------------------------------------------------------------
 * Altura mínima do editor (paridade com trix-editor)
 * ------------------------------------------------------------ */
lexxy-editor {
  --lexxy-editor-rows: 20em;
}

lexxy-editor[preset="comment"] {
  --lexxy-editor-rows: 3lh;
}

/* ------------------------------------------------------------
 * Cor de texto via <mark>
 * ------------------------------------------------------------ */

/* NOTE: o Lexxy aplica cor de texto em <mark style="color: ...">; o reset do
   fornecedor usa :where() (especificidade zero) e perde para o mark global de
   defaults.css, que pintaria o fundo com --bs-light */
.lexxy-content mark {
  background-color: transparent;
  color: inherit;
}

/* ------------------------------------------------------------
 * Tamanhos de texto menores que o corpo (h5/h6 como texto pequeno)
 * Sobrescreve o Bootstrap, que define h5=1.25rem e h6=1rem
 * ------------------------------------------------------------ */
.lexxy-content h5 { font-size: 0.875rem; }
.lexxy-content h6 { font-size: 0.75rem; }

/* ------------------------------------------------------------
 * Menção inline (@nome)
 * ------------------------------------------------------------ */
action-text-attachment[content-type="application/vnd.actiontext.mention"] {
  display: inline-flex;
  vertical-align: baseline;
}

.mention-chip {
  background-color: var(--bs-light);
  border-radius: var(--bs-border-radius-sm);
  color: var(--bs-black);
  display: inline;
  font-size: 0.875em;
  padding: 0 0.25em;
}

/* ------------------------------------------------------------
 * Estado somente leitura
 * ------------------------------------------------------------ */
[data-lexxy-readonly-value="true"] lexxy-editor {
  background-color: var(--bs-gray-200);
}

[data-lexxy-readonly-value="true"] lexxy-toolbar .lexxy-editor__toolbar-button {
  cursor: default;
  opacity: 0.3;
}