/*
 * Rich Text Content
 * Styles for ActionText/Lexxy rendered content (both editor and display)
 * Adapted from reference implementation, mapped to our design token system
 */

@layer components {
  :where(.rich-text-content) {
    --block-margin: 0.5lh;

    h1, h2, h3, h4, h5, h6 {
      display: block;
      font-weight: 700;
      letter-spacing: -0.02ch;
      line-height: var(--leading-tight);
      margin-block: 0 var(--block-margin);
      overflow-wrap: break-word;
      text-wrap: balance;
    }

    h1 { font-size: var(--text-xx-large); }
    h2 { font-size: var(--text-x-large); }
    h3 { font-size: var(--text-large); }
    h4 { font-size: var(--text-medium); }
    h5 { font-size: var(--text-normal); }
    h6 { font-size: var(--text-small); }

    p, ul, ol, dl, blockquote, figure, .attachment {
      margin-block: 0 var(--block-margin);

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

    ul {
      list-style: disc;
      padding-inline-start: 3ch;
    }

    ol {
      list-style: decimal;
      padding-inline-start: 3ch;
    }

    li:has(li) {
      list-style: none;

      ol, ul {
        margin: 0;
        padding-inline-start: 2ch;
      }
    }

    b, strong, .lexxy-content__bold {
      font-weight: 500;
    }

    i, em, .lexxy-content__italic {
      font-style: italic;
    }

    s, .lexxy-content__strikethrough {
      text-decoration: line-through;
    }

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

    p, blockquote {
      letter-spacing: -0.005ch;
    }

    /* Avoid extra space due to empty paragraphs */
    p:empty {
      display: none;
    }

    blockquote {
      border-inline-start: 0.25em solid var(--color-gray);
      font-style: italic;
      margin: var(--block-margin) 0;
      padding-inline-start: 2ch;
    }

    img, video, embed, object {
      display: block;
      inline-size: auto;
      margin-inline: auto;
      max-inline-size: 100%;
      object-fit: contain;
    }

    figure {
      text-align: center;
    }

    figure img,
    figure video {
      margin-inline: auto;
    }

    figcaption {
      color: var(--color-gray-dark);
      font-size: var(--text-normal);
      margin-block-start: var(--block-space-half);
    }

    /* Links should hug media contained within */
    a:has(img),
    a:has(video) {
      display: block;
      inline-size: fit-content;
      margin-inline: auto;
    }

    hr {
      color: currentColor;
      block-size: 0;
      border: none;
      border-block-end: 2px solid currentColor;
      inline-size: 20%;
      margin: calc(var(--block-margin) * 2) 0;
    }

    .horizontal-divider {
      margin: var(--block-margin) 0;
      padding-block: var(--block-margin);
    }

    /* Code */
    code, pre {
      background-color: var(--color-gray-lightest);
      border: 1px solid var(--color-gray-medium);
      border-radius: 0.3em;
      color: var(--color-gray-darker);
      font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
      font-size: 0.85em;
      font-weight: 500;
      margin-block: var(--block-margin);
      padding: 0.1em 0.3em;

      &:is(pre),
      &[data-language] {
        border-radius: 0.5em;
        display: block;
        overflow-x: auto;
        padding: 0.5lh 2ch;
        tab-size: 2;
        text-wrap: nowrap;
        white-space: pre;
        word-break: break-word;

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

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

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

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

        /* Operators and symbolic entities */
        .code-token__operator,
        .token.entity,
        .token.operator,
        .token.url {
          color: var(--color-code-token__operator);
        }

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

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

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

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

  .attachment {
    block-size: auto;
    display: block;
    inline-size: fit-content;
    position: relative;
    max-inline-size: 100%;

    progress {
      inline-size: 100%;
      margin: auto;
    }
  }

  .attachment__caption {
    color: var(--color-gray-dark);
    font-size: var(--text-normal);

    textarea {
      background-color: transparent;
      border: none;
      color: inherit;
      inline-size: 100%;
      max-inline-size: 100%;
      resize: none;
      text-align: center;

      &:focus {
        outline: none;
      }

      @supports (field-sizing: content) {
        field-sizing: content;
        inline-size: auto;
        min-inline-size: 20ch;
      }
    }
  }

  .attachment__icon {
    aspect-ratio: 4/5;
    background-color: var(--color-gray-lightest);
    block-size: 2.5lh;
    border: 2px solid var(--color-gray);
    border-block-start-width: 1ch;
    border-radius: 0.5ch;
    box-sizing: border-box;
    color: var(--color-gray);
    display: grid;
    font-size: var(--text-normal);
    font-weight: 500;
    inline-size: auto;
    padding-inline: 0.5ch;
    place-content: center;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .attachment--preview {
    margin-inline: auto;
    text-align: center;

    img, video {
      block-size: auto;
      display: block;
      margin-inline: auto;
      max-inline-size: 100%;
      user-select: none;
    }

    > a {
      display: block;
    }

    .attachment__caption {
      column-gap: 0.5ch;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin-block-start: 0.5ch;
    }
  }

  .attachment--file {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1ch;
    inline-size: 100%;
    margin-inline: 0;

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

    .attachment__name {
      color: var(--color-gray-darker);
      font-weight: 500;
    }

    &:has(video) {
      .attachment__caption {
        flex: none;
        inline-size: 100%;
      }
    }
  }

  .attachment__link {
    color: var(--color-green-dark);
    text-decoration: underline;
  }

  /* Custom attachments such as mentions, etc. */
  action-text-attachment[content-type^='application/vnd.actiontext'] {
    --attachment-bg-color: transparent;
    --attachment-image-size: 1em;
    --attachment-text-color: currentColor;

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

    lexxy-editor & {
      cursor: pointer;
    }

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

    &.node--selected {
      --attachment-bg-color: var(--color-gray-darker);
      --attachment-text-color: var(--color-white);
    }
  }

  [data-lexical-cursor] {
    animation: blink 1s step-end infinite;
    block-size: 1lh;
    border-inline-start: 1px solid currentColor;
    line-height: inherit;
    margin-block: 1em;
  }
}