/* ===========================================
   Code samples (markup from CodeBlocksHelper#code_sample, tokens from Rouge), the same in blog
   posts, issue pages and AI fixes. Every token color is 7:1 or better on the ink background.
   =========================================== */

@layer components {
  .code-sample {
    margin: var(--space-6) 0;
    overflow: hidden;
    color: #E4EAF3;
    background: #13233F;
    border-radius: var(--radius-lg);

    .code-sample__bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--space-4);
      margin: 0;
      padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);
      border-bottom: 1px solid rgb(255 255 255 / 0.1);
    }

    .code-sample__language {
      font-size: var(--text-sm);
      font-weight: var(--font-semibold);
      line-height: 1;
      color: #C8D3E5;
    }

    .code-sample__copy {
      min-height: 2rem;
      padding: 0 var(--space-3);
      font-family: var(--font-sans);
      font-size: var(--text-sm);
      font-weight: var(--font-medium);
      color: #E4EAF3;
      cursor: pointer;
      background: transparent;
      border: 1px solid rgb(255 255 255 / 0.28);
      border-radius: var(--radius-md);

      &:hover {
        background: rgb(255 255 255 / 0.08);
        border-color: rgb(255 255 255 / 0.5);
      }

      &:focus-visible {
        outline: 3px solid #7FB0EE;
        outline-offset: 2px;
      }
    }

    /* Long lines wrap instead of scrolling: a scrolling block would need its own tab stop (WCAG 2.1.1) */
    .code-sample__code {
      margin: 0;
      padding: var(--space-5) var(--space-5) var(--space-6);
      overflow: visible;
      font-family: var(--font-mono);
      font-size: 0.875rem;
      line-height: 1.75;
      color: inherit;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      tab-size: 2;
      background: transparent;
      border-radius: 0;

      code {
        padding: 0;
        font: inherit;
        color: inherit;
        background: transparent;
        border-radius: 0;
      }
    }

    .nt, .k, .kd, .kn, .kr, .kt, .kp { color: #8FB8F0; }
    .na, .py, .nl, .nv { color: #F0C987; }
    .s, .s1, .s2, .sb, .sc, .sd, .sh, .dl, .sr, .ss { color: #A8DDB5; }
    .m, .mi, .mf, .mh, .mo, .ni, .kc, .no { color: #F5A9A0; }
    .nc, .nf, .nx, .nb, .nd, .bp { color: #D7C4F5; }
    .o, .p, .ow { color: #C8D3E5; }
    .c, .c1, .cm, .cs, .cp { font-style: italic; color: #9FB1CF; }
    .err { color: inherit; background: none; }

    .code-sample__bad,
    .code-sample__good {
      font-style: normal;
      font-weight: var(--font-semibold);
    }

    .code-sample__bad { color: #F5A9A0; }
    .code-sample__good { color: #A8DDB5; }
  }

  /* Inline code in AI fixes, the same chip as in blog posts */
  .inline-code {
    padding: 0.12em 0.35em;
    font-family: var(--font-mono);
    font-size: 0.875em;
    color: var(--color-text);
    background: var(--color-gray-100);
    border-radius: var(--radius-sm);
  }

  .selector-hint {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);

    code {
      padding: 0;
      font-size: var(--text-sm);
      color: var(--color-text);
      background: transparent;
    }
  }
}