.root {
  @apply w-full
    rounded
    border
    border-neutral-900
    bg-neutral-950;

  .content {
    @apply m-0
      p-4;

    & > code {
      @apply grid
        overflow-x-auto
        bg-transparent
        p-0
        font-ibm-plex-mono
        text-sm
        font-regular
        leading-snug
        text-neutral-400
        [counter-reset:line];

      & > [class='line'] {
        @apply relative
          min-w-0
          pl-8;

        &:not(:empty:last-child)::before {
          @apply inline-block
            content-[''];
        }

        &:not(:empty:last-child)::after {
          @apply absolute
            left-0
            top-0
            mr-4
            w-4.5
            text-right
            font-ibm-plex-mono
            text-neutral-600
            [content:counter(line)]
            [counter-increment:line];
        }
      }
    }
  }

  & > .footer {
    @apply flex
      items-center
      justify-between
      border-t
      border-t-neutral-900
      px-4
      py-3
      text-sm
      font-medium;

    & > .language {
      @apply text-neutral-400;
    }

    & > .action {
      @apply px-3
        py-1.5
        font-medium;
    }
  }
}

.notification {
  @apply flex
    items-center
    gap-3;
}

.icon {
  @apply size-4;
}