@layer components {
  .prose {
    .highlight,
    :not(pre) > code {
      font-size: 0.875em;
      border: 1px solid;
      border-radius: theme("spacing.1");
      background: theme("colors.white");
      border-color: theme("colors.gray.light.300");
      .dark & {
        background: theme("colors.gray.dark.200");
        border-color: theme("colors.gray.dark.300");
      }
    }

    :not(pre) > code {
      background: theme("colors.gray.light.200");
      display: inline-block;
      margin: 0;
      font-weight: 400;
      overflow-wrap: anywhere;
      padding: 0 4px;
    }

    table:not(.lntable) code {
      overflow-wrap: unset;
      white-space: nowrap;
    }

    /* Indented code blocks */
    pre:not(.chroma) {
      @apply my-4 overflow-x-auto p-3;
      font-size: 0.875em;
      border: 1px solid;
      border-radius: theme("spacing.1");
      background: theme("colors.white");
      border-color: theme("colors.gray.light.300");
      .dark & {
        background: theme("colors.gray.dark.200");
        border-color: theme("colors.gray.dark.300");
      }
    }

    .highlight {
      @apply my-4 overflow-x-auto p-3;

      /* LineTableTD */
      .lntd {
        vertical-align: top;
        padding: 0;
        margin: 0;
        font-weight: 400;
        padding: 0 4px;
        &:first-child {
          width: 0;
        }
      }

      /* LineTableTD */
      .lntd {
        vertical-align: top;
        padding: 0;
        margin: 0;
        border: 0;
      }
      /* LineTable */
      .lntable {
        display: table;
        width: 100%;
        border-spacing: 0;
        padding: 0;
        margin: 0;
        border: 0;
        /* LineNumberColumnHighlight */
        .lntd:first-child .hl {
          display: block;
        }
      }
    }
  }
}