@import url("/assets/lexxy-overrides/lexxy-variables-bfbcf891.css");

/* ----------------------------------------------------------------
 * ! CODE SURFACES */

:where(.lexxy-content, .lexxy-editor__content) {
  code,
  pre {
    font-family: var(--font-family--mono);
    font-size: 0.9em;
    font-weight: 500;
    color: var(--color--aaa-text);
    background-color: var(--lexxy-color-code-bg);
    border-radius: var(--lexxy-radius);
  }

  code:not(:is(pre code, [data-language])) {
    padding: 0.2ch 0.45ch;
    white-space: normal;
  }

  pre,
  code[data-language] {
    display: block;
    overflow-x: auto;
    padding: 1ch;
    margin-block: 0 var(--lexxy-content-margin);
    white-space: pre;
    word-break: normal;
    hyphens: none;
    tab-size: 2;
    text-wrap: nowrap;
  }

  pre code {
    padding: 0;
    margin: 0;
    font-size: inherit;
    background: none;
    border-radius: 0;
  }
}

/* ----------------------------------------------------------------
 * ! CONTEXTUAL SURFACE OVERRIDES */

:where(
  .private,
  .private-post,
  .thing-grid-item-v2.private,
  .thing-timeline-item.private,
  .private-indicator,
  .private-footer,
  tbody tr.private
) {
  --lexxy-color-code-bg: var(--color--bg-1);
}

/* ----------------------------------------------------------------
 * ! SHARED TOKEN MAP (EDITOR + PRISM) */

:where(.lexxy-content, .lexxy-editor__content) {
  /* Lexxy editor token classes */
  .code-token__attr        { color: var(--syntax--bucket--att); }

  .code-token__property    { color: var(--syntax--bucket--property); }

  .code-token__selector    { color: var(--syntax--bucket--selector); }

  .code-token__comment     { color: var(--syntax--bucket--comment);}

  .code-token__operator    { color: var(--syntax--bucket--operator); }

  .code-token__function    { color: var(--syntax--bucket--function); }

  .code-token__variable    { color: var(--syntax--bucket--variable); }

  .code-token__punctuation { color: var(--syntax--bucket--punctuation); }

  /* Prism token classes */
  .token {
    /* Keywords, directives, attrs */
    &:is(
      .atrule,
      .attr,
      .attr-name,
      .directive,
      .keyword
    ) {
      color: var(--syntax--bucket--att);
    }

    /* Constants, numbers, booleans, symbols */
    &:is(
      .boolean,
      .color,
      .constant,
      .directive-hash,
      .hexcode,
      .number,
      .property,
      .symbol,
      .tag
    ) {
      color: var(--syntax--bucket--property);
    }

    /* Strings and selector-like tokens */
    &:is(
      .addition,
      .attr-value,
      .builtin,
      .char,
      .command,
      .heredoc-string,
      .inserted,
      .line,
      .regex-literal,
      .selector,
      .string,
      .string-literal
    ) {
      color: var(--syntax--bucket--selector);
    }

    /* Comments and metadata */
    &:is(
      .cdata,
      .comment,
      .coord,
      .doctype,
      .italic,
      .prolog
    ) {
      color: var(--syntax--bucket--comment);
      font-style: italic;
    }

    /* Operators and entities */
    &:is(
      .deleted,
      .deletion,
      .entity,
      .operator,
      .raw-string,
      .url
    ) {
      color: var(--syntax--bucket--operator);
    }

    /* Functions, classes, type-ish names */
    &:is(
      .class,
      .class-name,
      .decorator,
      .function,
      .macro,
      .method-definition,
      .script,
      .style,
      .title,
      .type-definition
    ) {
      color: var(--syntax--bucket--function);
    }

    /* Variables and regex */
    &:is(
      .bold,
      .important,
      .interpolation,
      .namespace,
      .parameter,
      .regex,
      .variable
    ) {
      color: var(--syntax--bucket--variable);
    }

    /* Punctuation and delimiters */
    &:is(
      .delimiter,
      .double-colon,
      .punctuation
    ) {
      color: var(--syntax--bucket--punctuation);
    }
  }
}


/* ----------------------------------------------------------------
 * ! MARKUP LANGUAGE TUNING (MONOKAI-ISH) */

:where(.lexxy-content, .lexxy-editor__content) {
  code:is(
    [data-language="html"],
    [data-highlight-language="html"],
    [data-language="xml"],
    [data-highlight-language="xml"]
  ) {
    --syntax--tag:         var(--syntax--red);
    --syntax--attr-name:   var(--syntax--green);
    --syntax--attr-value:  var(--syntax--yellow);
    --syntax--entity:      var(--syntax--purple);
    --syntax--punctuation: var(--syntax--bucket--punctuation);

    .code-token__property    { color: var(--syntax--tag); }

    .code-token__attr        { color: var(--syntax--attr-name); }

    .code-token__selector    { color: var(--syntax--attr-value); }

    .code-token__operator    { color: var(--syntax--entity); }

    .code-token__punctuation { color: var(--syntax--punctuation); }

    .token {
      &:is(.tag, .tag .token.tag) {
        color: var(--syntax--tag);
      }

      &.attr-name { color: var(--syntax--attr-name); }

      &:is(.attr-value, .attr-value .token.punctuation) {
        color: var(--syntax--attr-value);
      }

      &:is(.entity, .named-entity) {
        color: var(--syntax--entity);
      }

      &:is(.punctuation, .punctuation.attr-equals) {
        color: var(--syntax--punctuation);
      }
    }
  }
}


/* ----------------------------------------------------------------
 * ! STYLESHEET LANGUAGE TUNING (EDITOR/RENDERED PARITY) */

:where(.lexxy-content, .lexxy-editor__content) {
  code:is(
    [data-language="css"],
    [data-highlight-language="css"]
  ) {
    --syntax--comment: var(--syntax--gray);
    --syntax--muted: var(--syntax--gray);
    --syntax--atrule: var(--syntax--orange);
    --syntax--selector: var(--syntax--red);
    --syntax--selector-class: var(--syntax--green);
    --syntax--number: var(--syntax--purple);
    --syntax--variable: var(--syntax--orange);

    /* Lexxy editor token classes in CSS mode (coarse bucket mapping) */
    .code-token__comment {
      color: var(--syntax--comment);
    }

    .code-token__attr {
      color: var(--syntax--atrule);
      font-weight: 700;
    }

    .code-token__function { color: var(--syntax--selector-class); }

    .code-token__selector { color: var(--syntax--selector); }

    .code-token__property { color: var(--syntax--number); }

    .code-token__variable { color: var(--syntax--variable); }

    .code-token__operator,
    .code-token__punctuation {
      color: var(--syntax--muted);
    }

    /* Prism token classes tuned to match editor buckets */
    .token {
      &.comment {
        color: var(--syntax--comment);
      }

      &:is(.atrule, .rule) {
        color: var(--syntax--atrule);
        font-weight: 700;
      }

      &:is(.class, .function, .selector .token.class, .selector .token.function) {
        color: var(--syntax--selector-class);
      }

      &:is(
        .selector,
        .tag,
        .pseudo-class,
        .pseudo-element,
        .attr-value,
        .string,
        .url,
        .keyword,
        .color:not(.hexcode)
      ) {
        color: var(--syntax--selector);
      }

      &:is(.number, .unit, .hexcode, .constant, .boolean, .null, .entity, .property) {
        color: var(--syntax--number);
      }

      &:is(.variable, .interpolation, .placeholder, .important, .id, .selector .token.id) {
        color: var(--syntax--variable);
      }

      &:is(.operator, .punctuation, .delimiter) {
        color: var(--syntax--muted);
      }
    }
  }
}