@layer base {
  .astro-code .line {
    display: inline-block;
  }
  .astro-code .line.diff,
  .astro-code .line.focused {
    position: relative;
    width: calc(100% + var(--spacing) * 12);
    padding-inline: calc(var(--spacing) * 6);
    margin-inline: calc(var(--spacing) * -6);
  }

  /* Diff: added lines */
  .astro-code .line.diff.add {
    background-color: rgba(184, 187, 38, 0.12);
  }

  .astro-code .line.diff.add::before,
  .astro-code .line.diff.remove::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--spacing) * 6);
    font-weight: bold;
  }

  .astro-code .line.diff.add::before {
    color: rgba(184, 187, 31, 1);
    content: "+";
  }

  /* Diff: removed lines */
  .astro-code .line.diff.remove {
    background-color: rgba(251, 73, 52, 0.12);
  }

  .astro-code .line.diff.remove::before {
    color: rgba(251, 73, 52, 1);
    content: "-";
  }

  /* Word highlight */
  .astro-code .highlighted-word {
    padding-inline: 0.2em;
    background-color: var(--color-soot);
    border-bottom: 1px solid var(--color-manila-dark);
  }

  :where(.dark, .dark *) .astro-code .highlighted-word {
    background-color: var(--color-faded-black);
  }

  /* Focus: mute unfocused lines, reveal on hover */
  .astro-code:has(.line.focused) .line:not(.focused) span {
    opacity: 0.4;
    transition: opacity 0.3s;
  }

  .astro-code:has(.line.focused):hover .line:not(.focused) span,
  .astro-code:has(.line.focused):focus-within .line:not(.focused) span {
    opacity: 1;
  }
}