.light-mode .nuxt-content {

  h1, h2, h3, h4, h5, h6{
    & code{
      @apply bg-indigo-50 text-primary-dark border border-indigo-50;
    }
  }
  p {
    color: theme('colors.light.onSurfacePrimary');
   }

  blockquote {
    color: theme('colors.light.onSurfaceSecondary');
  }

  .nuxt-content-highlight{
    & code {
      @apply border-0;
    }
  }

  & a:not(.btn) {
    @apply text-dalil-lightindigo border-light-border transform;
    &:hover {
      @apply bg-light-surface border-light-onSurfacePrimary;
    }

    & code {
      @apply text-dalil-lightindigo;

      &:hover {
        @apply text-dalil-indigo;
      }
      &:active {
        @apply scale-95;
      }
    }
  }
  // inline code snippet
  & code {
    @apply bg-red-100 text-red-700;
  }

  & pre {
    @apply static;

    @apply bg-dark-elevatedSurface2 border border-dark-elevatedSurface2;

    code {
      color: theme('colors.dark.onSurfacePrimary');
    }
  }
  // code snippet block
  & pre {
    code {
      @apply bg-transparent;

      color: theme('colors.dark.onSurfacePrimary');
    }
  }

  table {
    td, th {
      @apply border-light-border;
    }

    tr:nth-child(even){
      @apply bg-light-surface;
    }

    tr{
      &:hover{
        // @apply bg-gray-200;
      }
    }

    th {
      @apply bg-primary-base text-white;
    }
  }

  & .Alert {
    @apply bg-blue-100 text-light-onSurfacePrimary;

    & a {
      @apply text-blue-600;
    }

    & code {
      @apply text-blue-800 bg-blue-200;
    }

    &.Alert--orange {
      @apply bg-orange-100;

      & a {
        @apply text-orange-600;
      }

      & code {
        @apply text-orange-800 bg-orange-200;
      }
    }
  }

  .Promote {
    // @apply shadow-md;
    background-color: theme('colors.gray.200');

    .Promote__Content {
      .Promote__Content__Title {
        color: theme('colors.light.onSurfacePrimary');
      }

      .Promote__Content__Description {
        color: theme('colors.light.onSurfaceSecondary');
      }

      .Promote__Content__Signature {
        @apply text-gray-500;
      }
    }

    &:hover {
      // @apply shadow-lg;
      background-color: theme('colors.gray.300');
      text-decoration: none;
    }
  }
}
