/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

lexxy-editor {
  --lexxy-color-canvas: var(--color-stone-50);
  --lexxy-editor-padding: 1ch 0;
  --lexxy-editor-rows: 5lh;
  border: none;
}

lexxy-editor .lexxy-editor__toolbar-button {
  block-size: 1.25lh;
}

lexxy-editor .lexxy-editor__content p {
  margin-bottom: 0.5lh;
}

lexxy-editor .lexxy-editor__content ul,
lexxy-editor .lexxy-editor__content ol {
  padding-left: 1.5ch;
  margin-left: 0.5ch;
}

lexxy-editor .lexxy-editor__content ul {
  list-style-type: disc;
}

lexxy-editor .lexxy-editor__content ol {
  list-style-type: decimal;
}

lexxy-editor .lexxy-editor__content li {
  margin-left: 0;
}

lexxy-editor .lexxy-editor__content blockquote {
  margin-block: 0.75lh;
  padding-left: 1ch;
  border-left: 1px solid var(--color-stone-300);
  color: var(--color-stone-600);
}

lexxy-editor .lexxy-editor__content h1,
lexxy-editor .lexxy-editor__content h2,
lexxy-editor .lexxy-editor__content h3 {
  margin-top: 0.75lh;
  margin-bottom: 0.375lh;
  font-family: var(--font-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-stone-800);
}

lexxy-editor .lexxy-editor__content h1 {
  font-size: var(--text-lg);
  line-height: var(--text-lg--line-height);
}

lexxy-editor .lexxy-editor__content h2 {
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
}

lexxy-editor .lexxy-editor__content h3 {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}

.article .trix-content {
  text-align: left;
  text-wrap: pretty;
}

.article .trix-content p + p {
  margin-top: calc(var(--spacing) * 6);
}

.article .trix-content p + h2,
.article .trix-content p + h3 {
  margin-top: calc(var(--spacing) * 10);
}

.article .trix-content h2,
.article .trix-content h3 {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-stone-800);
  margin-bottom: calc(var(--spacing) * 3);
}

.article .trix-content h3 {
  margin-top: calc(var(--spacing) * 2);
}

.article .trix-content ul,
.article .trix-content ol {
  padding-left: 0;
  margin-top: calc(var(--spacing) * 4);
  margin-bottom: calc(var(--spacing) * 4);
  list-style-position: inside;
}

.article .trix-content ul {
  list-style-type: disc;
}

.article .trix-content ol {
  list-style-type: decimal;
}

.article .trix-content li {
  margin-left: 0;
}

.article .trix-content li::marker {
  color: var(--color-stone-500);
}

.article .trix-content li + li {
  margin-top: calc(var(--spacing) * 1);
}