/* purgecss start ignore */

/* Light Content Style */
@import './content-light';

/* Dark Content Style */
@import './content-dark';


.nuxt-content {
  img {
    @apply rounded;

    margin: auto;
  }

  .code-block.active .nuxt-content-highlight {
    margin-top: 0;
  }

  video {
    width: 100%;
  }

  h2, h3{
    @apply font-semibold;
  }
  & h2,
  & h3,
  & h4,
  & h5,
  & h6 {
    color: theme('colors.primary.dark');
    font-family: 'open sans', 'cairo';

    & a {
      margin: 0 -1.5rem 0 -1.5rem;
      padding: 0 1.5rem 1.7rem 0;
    }

    & a,
    .icon-link {
      @apply float-left text-green-600;

      display: inline-block;
      height: 16px;
      margin-top: 4px;
      margin-right: -1.5rem;
      position: absolute;
      width: 16px;

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

    & code{
      @apply py-2 px-3;
    }

    &:hover {
      & .icon-link {
        visibility: visible;
      }
    }
  }

  h2{
    @apply border-b font-bold pb-2 border-light-border; // dark:border-dark-border
    width: 100%;
  }
  & h2 {
    @apply relative text-xl table;

    @media (min-width: 1024px){
      @apply text-2xl;
    }

    margin-top: 2em;
    margin-bottom: 1em;

    /* &::after {
      content: ' ';
      width: 80%;

      @apply block border-2 border-dalil-indigo mt-2 mb-1 rounded border-solid;
    } */

    & code {
      @apply text-2xl pb-1;
      line-height: 0.8!important;
    }

    & a.icon-link {
      @apply pt-3;
    }
  }

  @media (max-width: 800px){
    .icon-link{
      visibility: hidden!important;
      display: none!important;
    }
  }

  & h3 {
    @apply relative text-lg table mt-10 mb-5;

    @media (min-width: 1024px){
      @apply text-2xl;
    }

    a{
      .icon-link{
        visibility: visible!important;
      }
    }

    /* &::after {
      content: ' ';
      width: 80%;

      @apply block border-2 border-gray-600 mt-2 mb-1 rounded border-solid;
    } */

    & code {
      @apply text-xl py-2 px-2;
      line-height: 0.7!important;
    }

    & a.icon {
      @apply pt-2;
    }
  }
  & h4{
    @apply mb-3 mt-6 text-lg;
    font-weight: bold;

    & code{
      @apply py-1 px-2;
    }
  }
  & h5{
    @apply mb-1 mt-3 font-bold text-base;
  }

  p {
    @apply leading-9 pb-1 mb-2 transition-colors duration-300 ease-linear;

    a{
      @apply border-b border-dashed;
      padding: 7px 0;
    }
  }

  & li p {
    @apply inline-block;
  }

  & blockquote {
    @apply italic pr-5 border-r-4 text-sm border-gray-300 my-5;
    &, p{
      @apply leading-8;
      color: theme('colors.gray.700')!important;
    }
  }

  & code {
    @apply p-1 not-italic rounded text-sm ;
    line-height: 1;

    direction: ltr!important;
    display: inline-block!important;
  }
  pre {
    code {
        @apply rounded-none p-0;
        color: #ffde61!important;
        font-size: 0.95rem;
        line-height: 1.75;
    }
  }

  & a {
    overflow-wrap: break-word;
  }
  // code snippet block
  & pre {
    @apply p-2 overflow-auto;

    border-radius: 8px!important;

    & code {
      @apply bg-transparent p-0;
    }
  }
  .code-group{
    pre{
      border-top-left-radius: 0!important;
      border-top-right-radius: 0!important;
    }
  }

  & 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 {
      height: auto;
      width: 100%;

      @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;
      }
    }
  }

  // tables

  table {
    @apply text-sm my-6;

    display: block;
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    // border-collapse: collapse;
    &, thead, tbody, tr, td, th{
      width: 100%;
    }
    overflow-x: auto!important;

    thead, tbody{
      width: 100%;
    }

    td, th {
      @apply p-4 border;
      white-space: nowrap;
    }

    th {
      @apply py-3;
    }
  }

}
// lists
.nuxt-content {
  & ul,
  & ol {
    @apply py-1 pl-1; // list-inside
    margin-right: 1.1rem;

    & li {
      @apply leading-loose pt-0 pb-3;
    }

    & 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-400 font-light z-10 mr-2 mt-1 text-sm;
  }

  & > .copy {
    @apply hidden absolute items-center right-0 bottom-0 leading-none shadow-lg p-2 text-white text-sm uppercase rounded-md font-semibold mr-3 mb-3;

    z-index: 4;

    @media (min-width: 1024px){
      @apply flex; // not hidden in lg screens
    }

    &:focus {
      @apply outline-none;
    }
    &.copied{
      @apply flex;
    }
  }

  &:hover {
    & > .copy {
      @apply flex;
    }
  }
}

article{
  > h1{
    color: theme('colors.light.onSurfaceStrong');
    font-weight: 700!important;
    @media (min-width: 1024px){
      font-size: 2em!important;
    }
    margin-top: 0;
    margin-bottom: .8888889em;
    line-height: 1.1111111;
  }
}
.nuxt-content {
  font-family: 'open sans', 'droid';

  code{
    @apply mx-1;
  }

  .nuxt-content-highlight{
    @apply mt-6 mb-3;

    pre{
      @apply my-2;
      code{
        @apply mx-0;
      }
    }
  }
  .token{
    &.number{
      color: ffdc8e!important;
    }
    &.comment {
      color: #acb5b9;
    }
    &.class-name{
      color: #ff9292!important;
    }
  }
}


