@import url("/assets/lexxy-variables-1e0d0185.css");

/* Text styles
/* -------------------------------------------------------------------------- */

:where(.lexxy-content) {
  color: var(--lexxy-color-ink);
  font-size: var(--lexxy-text-size);

  h1, h2, h3, h4, h5, h6 {
    display: block;
    font-weight: bold;
    hyphens: auto;
    margin-block: 0 var(--lexxy-content-margin);
    overflow-wrap: break-word;

    @supports (text-wrap: balance) {
      text-wrap: balance;
    }
  }

  h1 { font-size: 2em; }
  h2 { font-size: 1.5em; }
  h3 { font-size: 1.25em; }
  h4 { font-size: 1em; }
  h5 { font-size: 0.875em; }
  h6 { font-size: 0.75em; }

  p,
  ul,
  ol,
  dl,
  blockquote,
  figure,
  :where(.attachment),
  :where(.attachment-gallery) {
    margin-block: 0 var(--lexxy-content-margin);
    position: relative;

    &:not(lexxy-editor &) {
      overflow-wrap: break-word;

      @supports (text-wrap: pretty) {
        text-wrap: pretty;
      }
    }
  }

  :where(.lexxy-content__italic) {
    font-style: italic;
  }

  :where(.lexxy-content__bold) {
    font-weight: bold;
  }

  :where(.lexxy-content__strikethrough) {
    text-decoration: line-through;
  }

  :where(.lexxy-content__underline) {
    text-decoration: underline;
  }

  :where(.lexxy-content__strikethrough.lexxy-content__underline) {
    text-decoration: line-through underline;
  }

  mark,
  :where(.lexxy-content__highlight) {
    background-color: transparent;
    color: inherit;
  }

  blockquote {
    border-inline-start: 0.25em solid var(--lexxy-color-ink-lighter);
    font-style: italic;
    margin: var(--lexxy-content-margin) 0;
    padding: 0.5lh 2ch;

    em,
    i,
    :where(.lexxy-content__italic) {
      font-style: normal;
    }

    p:last-child {
      margin-block-end: 0;
    }
  }

  p:empty {
    display: none;
  }

  a {
    color: var(--lexxy-color-link);
    text-decoration: underline;
  }

  img,
  video,
  embed,
  object {
    inline-size: auto;
    margin-inline: auto;
    max-block-size: 32rem;
    object-fit: contain;

    a:has(&) {
      display: inline-block;
    }
  }

  code, pre {
    background-color: var(--lexxy-color-ink-lightest);
    border-radius: var(--lexxy-radius);
    color: var(--lexxy-color-ink);
    font-family: var(--lexxy-font-mono);
    font-size: 0.9em;
    padding: 0.25ch 0.5ch;

    &:is(pre),
    &[data-language] {
      border-radius: var(--lexxy-radius);
      display: block;
      hyphens: none;
      margin-block: 0 var(--lexxy-content-margin);
      overflow-x: auto;
      overflow-wrap: break-word;
      padding: 1ch;
      tab-size: 2;
      white-space: pre;

      @supports (text-wrap: nowrap) {
        text-wrap: nowrap;
      }
    }
  }

  ol, ul:not(:where(.lexxy-prompt-menu)) {
    margin-inline-start: calc(var(--lexxy-content-margin) * 1.5);
    padding: 0;
  }

  ul {
    list-style-type: disc;
  }

  ol {
    list-style-type: decimal;
  }

  li:where(.lexxy-nested-listitem) {
    list-style-type: none;

    ol, ul {
      margin-block-end: 0;
    }
  }

  hr {
    border: 0;
    border-block-end: 1px solid currentColor;
    inline-size: 20%;
    margin: calc(0.5em + var(--lexxy-content-margin)) 0;
  }

  .horizontal-divider {
    margin: 0;
    padding: calc(0.5em + var(--lexxy-content-margin)) 0;

    hr {
      margin: 0;
    }
  }

  /* Kept at class specificity so it still outweighs the element margin rules above. */
  *:has(+ .horizontal-divider) {
    margin-block-end: 0;
  }

  > :last-child {
    margin-block-end: 0;
  }

  /* Keywords and attributes */
  :where(.code-token__attr),
  :where(.token.attr-name),
  :where(.token.atrule),
  :where(.token.attr),
  :where(.token.keyword) {
    color: var(--lexxy-color-code-token-att);
  }

  /* Constants, booleans, numbers, properties, tags */
  :where(.code-token__property),
  :where(.token.boolean),
  :where(.token.constant),
  :where(.token.number),
  :where(.token.property),
  :where(.token.symbol),
  :where(.token.tag) {
    color: var(--lexxy-color-code-token-property);
  }

  /* Strings, selectors, and built-in constructs */
  :where(.code-token__selector),
  :where(.token.attr-value),
  :where(.token.builtin),
  :where(.token.char),
  :where(.token.inserted),
  :where(.token.line),
  :where(.token.selector),
  :where(.token.string) {
    color: var(--lexxy-color-code-token-selector);
  }

  /* Comments and meta information */
  :where(.code-token__comment),
  :where(.token.cdata),
  :where(.token.comment),
  :where(.token.doctype),
  :where(.token.prolog) {
    color: var(--lexxy-color-code-token-comment);
    font-style: italic;
  }

  /* Operators and symbolic entities */
  :where(.code-token__operator),
  :where(.token.deleted),
  :where(.token.entity),
  :where(.token.operator),
  :where(.token.url),
  code[data-language="diff"] :where(.code-token__operator) + :where(.code-token__selector) {
    color: var(--lexxy-color-code-token-operator);
  }

  /* Functions and class names */
  :where(.code-token__function),
  :where(.token.class),
  :where(.token.class-name),
  :where(.token.function) {
    color: var(--lexxy-color-code-token-function);
  }

  /* Variables, regex, namespaces, important */
  :where(.code-token__variable),
  :where(.token.important),
  :where(.token.namespace),
  :where(.token.regex),
  :where(.token.variable) {
    color: var(--lexxy-color-code-token-variable);
  }

  /* Punctuation */
  :where(.code-token__punctuation),
  :where(.token.punctuation) {
    color: var(--lexxy-color-code-token-punctuation);
  }

  /* Tables */
  :where(.lexxy-content__table-wrapper) {
    margin: 0;
    margin-block: 1ch;
    overflow-x: auto;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
    inline-size: calc(100% - 0.5ch);
    margin: 0.25ch;

    th,
    td {
      border: 1px solid var(--lexxy-color-ink-lighter);
      min-width: 5ch;
      max-width: 50ch;
      padding: 1ch;
      text-align: start;
      word-break: normal;

      *:last-child {
        margin-block-end: 0;
      }

      &:where(.lexxy-content__table-cell--header) {
        background-color: var(--lexxy-color-table-header-bg);
        font-weight: bold;
      }

      *:is(code, pre) {
        hyphens: auto;
        white-space: pre-wrap;

        @supports (text-wrap: wrap) {
          text-wrap: wrap;
        }
      }
    }
  }


  /* Attachments
  /* ------------------------------------------------------------------------ */

  p:has(:where(.attachment)) {
    text-align: center;
  }

  :where(.attachment) {
    --lexxy-attachment-gap: 0.75ch;

    block-size: auto;
    box-sizing: border-box;
    border-radius: var(--lexxy-radius);
    display: block;
    inline-size: fit-content;
    margin-inline: auto;
    max-inline-size: 100%;
    min-inline-size: 10ch;
    padding: var(--lexxy-attachment-gap);
    position: relative;
    text-align: center;
  }

  /* Element weight, so a bare `figure { margin: 0 }` reset loaded before Lexxy doesn't uncenter attachments. */
  figure:where(.attachment) {
    margin-inline: auto;
  }

  :where(.attachment__caption) {
    color: var(--lexxy-color-text-subtle);
    display: block;
    font-size: var(--lexxy-text-small);
    padding: 1ch;
  }

  :where(.attachment__icon) {
    aspect-ratio: 4/5;
    background-color: color-mix(var(--lexxy-attachment-icon-color), transparent 90%);
    block-size: 3lh;
    border: 1px solid var(--lexxy-attachment-icon-color);
    border-block-start-width: 1.5ch;
    border-radius: var(--lexxy-radius);
    box-sizing: border-box;
    color: var(--lexxy-attachment-icon-color);
    display: grid;
    font-size: var(--lexxy-text-small);
    font-weight: bold;
    inline-size: auto;
    overflow: hidden;
    place-content: center;
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* Kept at class specificity so it still outweighs the `a:has(img)` rule above. */
  .attachment--preview > a {
    display: block;
  }

  :where(.attachment--preview) {
    img, video {
      border-radius: var(--lexxy-radius);
      block-size: auto;
      display: block;
      margin-inline: auto;
      max-inline-size: 100%;
      -webkit-user-select: none;

      @supports (user-select: none) {
        user-select: none;
      }
    }

    :where(.attachment__caption) {
      padding-block-end: 0.5ch;
    }
  }

  :where(.attachment--file) {
    --lexxy-attachment-icon-color: var(--lexxy-color-text-subtle);

    align-items: center;
    display: flex;
    flex-wrap: wrap;
    inline-size: auto;

    :where(.attachment__caption) {
      display: grid;
      flex: 1;
      text-align: start;
    }

    :where(.attachment__name) {
      color: var(--lexxy-color-ink);
      font-weight: bold;
    }
  }

  :where(.attachment--psd),
  :where(.attachment--key),
  :where(.attachment--sketch),
  :where(.attachment--ai),
  :where(.attachment--eps),
  :where(.attachment--indd),
  :where(.attachment--svg),
  :where(.attachment--ppt),
  :where(.attachment--pptx) {
    --lexxy-attachment-icon-color: var(--lexxy-color-red);
  }

  :where(.attachment--css),
  :where(.attachment--php),
  :where(.attachment--json),
  :where(.attachment--htm),
  :where(.attachment--html),
  :where(.attachment--rb),
  :where(.attachment--erb),
  :where(.attachment--ts),
  :where(.attachment--js) {
    --lexxy-attachment-icon-color: var(--lexxy-color-purple);
  }

  :where(.attachment--txt),
  :where(.attachment--pages),
  :where(.attachment--rtf),
  :where(.attachment--md),
  :where(.attachment--doc),
  :where(.attachment--docx) {
    --lexxy-attachment-icon-color: var(--lexxy-color-blue);
  }

  :where(.attachment--csv),
  :where(.attachment--numbers),
  :where(.attachment--xls),
  :where(.attachment--xlsx) {
    --lexxy-attachment-icon-color: var(--lexxy-color-green);
  }

  :where(.attachment--error) {
    padding-block: 2ch;
  }


  /* Image galleries */
  /* ------------------------------------------------------------------------ */

  :where(.attachment-gallery) {
    display: block;
    text-align: center;

    :where(.attachment) {
      display: inline-flex;
      flex-direction: column;
      gap: 0;
      inline-size: calc(33.333% - 0.8ch);
      vertical-align: top;

      :where(.attachment__caption) {
        padding-block-end: 1ch;
      }
    }

    &:where(.attachment-gallery--2),
    &:where(.attachment-gallery--4) {
      :where(.attachment) {
        inline-size: calc(50% - 0.8ch);
      }
    }
  }


  /* Custom attachments such as mentions, etc. */
  /* ------------------------------------------------------------------------ */

  action-text-attachment[content-type^="application/vnd.actiontext"] {
    --lexxy-attachment-bg-color: transparent;
    --lexxy-attachment-image-size: 1em;
    --lexxy-attachment-text-color: currentColor;

    align-items: center;
    background: var(--lexxy-attachment-bg-color);
    border-radius: var(--lexxy-radius);
    color: var(--lexxy-attachment-text-color);
    display: inline-flex;
    gap: 0.25ch;
    margin: 0;
    padding: 0;
    position: relative;
    white-space: normal;

    /* Gecko drops the whole selection when a drag crosses a contenteditable="false"
       island unless it is selectable as a single unit. Editor-only: the rendered
       view has no contenteditable and must keep normal text selection. */
    lexxy-editor & {
      -webkit-user-select: all;

      @supports (user-select: all) {
        user-select: all;
      }
    }

    img {
      block-size: var(--lexxy-attachment-image-size);
      border-radius: 50%;
      inline-size: var(--lexxy-attachment-image-size);
    }
  }


  /* Horizontal divider */
  /* ------------------------------------------------------------------------ */

  /* Kept at class specificity: the editor renders the divider as a figure, and this must outweigh the figure margin rule above. */
  .horizontal-divider {
    margin: 0;
    margin-block-end: .5em;
    padding: 1.5em 0 .5em;

    hr {
      border: 0;
      border-block-end: 1px solid currentColor;
      inline-size: 20%;
      margin: 0;
    }
  }
}