code {
  box-decoration-break: slice;
  font-feature-settings:
    'rlig' 1,
    'calt' 1,
    'ss01' 1;

  &[data-line-numbers] > .line {
    @apply nx-pl-2;
    &::before {
      counter-increment: line;
      content: counter(line);
      @apply nx-h-full nx-float-left nx-pr-4 nx-text-right nx-min-w-[2.6rem] nx-text-gray-500;
    }
  }

  .line {
    &.highlighted {
      @apply nx-bg-primary-600/10 nx-text-primary-600/50 nx-shadow-[2px_0_currentColor_inset];
    }
    .highlighted {
      @apply nx-rounded-sm nx-shadow-[0_0_0_2px_rgba(0,0,0,.3)];
      @apply nx-bg-primary-800/10 nx-shadow-primary-800/10;
      @apply dark:nx-bg-primary-300/10 dark:nx-shadow-primary-300/10;
    }
  }
}

pre {
  /* content-visibility: auto; */
  contain: paint;
  code {
    @apply nx-grid nx-min-w-full nx-rounded-none nx-border-none !nx-bg-transparent !nx-p-0 nx-text-sm nx-leading-5 nx-text-current dark:!nx-bg-transparent;
    .line {
      @apply nx-px-4;
    }
  }

  &:not([data-theme]) {
    @apply nx-px-4;
  }

  html[data-nextra-word-wrap] & {
    word-break: break-word;
    @apply nx-whitespace-pre-wrap md:nx-whitespace-pre;
    .line {
      @apply nx-inline-block;
    }
  }

  .nextra-copy-icon {
    animation: fade-in 0.3s ease forwards;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@supports (
  (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
) {
  .nextra-button {
    @apply nx-backdrop-blur-md nx-bg-opacity-[.85] dark:nx-bg-opacity-80;
  }
}