/* purgecss start ignore */
.light-mode .nuxt-content {
  h2,
  h3,
  p {
    color: theme('colors.light.onSurfacePrimary');
  }
  blockquote {
    color: theme('colors.light.onSurfaceSecondary');
  }
  & a {
    @apply text-nuxt-lightgreen;
    &:hover {
      @apply underline;
    }
    & code {
      @apply text-nuxt-lightgreen;
      &:hover {
        @apply text-nuxt-green;
      }
    }
  }
  // inline code snippet
  & code {
    @apply bg-gray-100 text-red-500;
  }
  & pre {
    background-color: theme('colors.dark.elevatedSurface');
    code {
      color: theme('colors.dark.onSurfacePrimary');
    }
  }
  // code snippet block
  & pre {
    code {
      @apply bg-transparent;

      color: theme('colors.dark.onSurfacePrimary');
    }
  }
  & .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;
    }
  }
}
.dark-mode .nuxt-content {
  h2,
  h3,
  p {
    color: theme('colors.dark.onSurfacePrimary');
  }
  & blockquote {
    color: theme('colors.dark.onSurfaceSecondary');
  }
  & a {
    @apply text-nuxt-lightgreen;
    &:hover {
      @apply underline;
    }
    & code {
      @apply text-nuxt-lightgreen;
      &:hover {
        @apply text-nuxt-green;
      }
    }
  }
  // inline code snippet
  & code {
    @apply bg-gray-800;

    color: #e1e8f5;
  }
  // code snippet block
  & pre {
    background-color: #1e344c;
    code {
      @apply bg-transparent;

      color: theme('colors.dark.onSurfacePrimary');
    }
  }
  & .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;
    }
  }
}
.nuxt-content {
  img {
    @apply rounded;

    margin: auto;
  }
  video {
    width: 100%;
  }
  & h2,
  & h3,
  & h4,
  & h5,
  & h6 {
    & a {
      margin-left: -1.5rem;
    }
    & a,
    .icon-link {
      @apply float-left;

      position: relative;
      display: inline-block;
      width: 14px;
      height: 14px;
      margin-top: 8px;

      & .icon-link {
        visibility: hidden;
        background-image: url('~assets/images/link.svg');
        background-size: 14px 14px;
      }
    }

    &:hover {
      & .icon-link {
        visibility: visible;
      }
    }
  }
  & h2 {
    @apply relative text-2xl table my-8;
    &::after {
      content: ' ';
      width: 80%;

      @apply block border-2 border-nuxt-green mt-2 mb-1 rounded;
    }
    & code {
      @apply text-xl;
    }
    & a.icon-link {
      @apply pt-3;
    }
  }
  & h3 {
    @apply relative text-xl table my-8;
    &::after {
      content: ' ';
      width: 80%;

      @apply block border-2 border-gray-600 mt-2 mb-1 rounded;
    }
    & code {
      @apply text-lg;
    }
    & a.icon {
      @apply pt-2;
    }
  }

  p {
    @apply leading-relaxed py-1 mb-2 transition-colors duration-300 ease-linear;
  }
  & li p {
    @apply inline-block;
  }
  & blockquote {
    @apply italic leading-loose;
  }
  & code {
    @apply p-1 not-italic rounded text-sm;
  }
  & a {
    overflow-wrap: break-word;
    &:hover {
      @apply underline;
    }
  }
  // code snippet block
  & pre {
    @apply rounded p-2 my-2 overflow-auto;
    & code {
      @apply bg-transparent;
    }
  }
  & b,
  & strong {
    @apply font-bold;
  }
  & .Alert {
    @apply px-4 py-2 rounded my-4;
    p {
      @apply mb-0;
    }
  }
  & .Promote {
    @apply flex flex-col p-4 my-4 rounded;
    & img {
      width: 100%;
      height: auto;

      @apply mb-3 rounded;

      @screen sm {
        max-width: 240px;

        @apply mb-0;
      }
    }
    & .Promote__Content {
      & .Promote__Content__Title {
        @apply text-xl;
      }
      & .Promote__Content__Description {
        @apply leading-relaxed py-1 pb-4 text-sm;
      }
      & .Promote__Content__Signature {
        @apply text-xs m-0 p-0 leading-none;
      }
    }

    @screen sm {
      @apply flex-row;
      & .Promote__Content {
        @apply pl-4;
      }
    }
  }
}
// lists
.nuxt-content {
  & ul,
  & ol {
    @apply list-inside py-1 pl-1;
    & li {
      @apply py-2;
    }
    & ul,
    & ol {
      @apply pl-4 pt-1;
    }
  }
  & ol {
    @apply list-decimal;
  }
  & ul {
    @apply list-disc;
  }
}

/* highlight page in corner of code */
.nuxt-content-highlight {
  @apply relative;
  & > .filename {
    @apply absolute right-0 top-0 text-gray-600 font-light z-10 mr-2 mt-1 text-sm;
  }
  & > pre {
    & > .copy {
      @apply hidden absolute right-0 bottom-0 shadow-lg px-3 py-1 text-white text-sm uppercase font-sans rounded-md bg-transparent border border-white tracking-wide font-semibold mr-3 mb-3;
      &:hover {
        @apply bg-gray-700;
      }
      &:focus {
        @apply outline-none bg-gray-900;
      }
    }
    &:hover {
      & > .copy {
        @apply block;
      }
    }
  }
}

/* purgecss end ignore */
