
.dark-mode .nuxt-content {
  h2{
    @apply border-b border-dark-border;
    width: 100%;
  }
  h1, h2, h3, h4, h5, h6{

    & code{
      @apply text-dark-onSurfaceStrong;
    }
  }
  h2,
  h3{
    color: theme('colors.dark.onSurfaceStrong')!important;
  }
  p {
    color: theme('colors.dark.onSurfacePrimary');

    strong{
      color: theme('colors.dark.onSurfaceStrong');
    }
  }

  & blockquote {
    p{
      color: theme('colors.gray.400')!important;
    }
    @apply border-primary-light;
  }


  & a:not(.btn) {
    @apply text-dark-onSurfaceStrong border-dark-border;

    &:hover {
      @apply bg-dark-surface border-dark-onSurfacePrimary;
    }

    & code {
      @apply text-dalil-lightindigo;

      &:hover {
        @apply text-dalil-indigo;
      }
    }
  }
  // inline code snippet
  & code {
    @apply bg-dark-surface border border-dark-border text-dark-primaryText;
  }
  // code snippet block
  & pre {
    @apply border border-dark-border;
    background-color: theme('colors.dark.surface');

    code {
      @apply bg-transparent border-none;

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

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

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

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

    th {
      @apply bg-dark-surface text-dark-onSurfaceStrong;
    }
  }

  & h2,
  & h3,
  & h4,
  & h5,
  & h6 {
    color: theme('colors.dark.onSurfaceStrong');

    & a,
    .icon-link {
      & .icon-link {
        background-image: url('~assets/images/link-white.svg');
      }
    }
  }

  & .Alert {
    // @apply bg-gray-600 text-dark-onSurfacePrimary;
    background-color: #205d80;

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

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

    &.Alert--orange {
      // @apply bg-orange-200;
      background-color: #4c4c4c;

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

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

  .Promote {
    @apply shadow-md;

    background: theme('colors.dark.surface');

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

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

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

    &:hover {
      @apply shadow-lg;

      background-color: #233344;
      text-decoration: none;
    }
  }
}
