@custom-variant dark (&:is(.vscode-dark *));

/* 
  Monomi Theme - Based on: https://github.com/estruyf/slidev-theme-the-unnamed
*/
.slide.monomi {
  --demotime-color: var(--vscode-editor-foreground);
  --demotime-background: var(--vscode-editor-background);

  --demotime-heading-color: var(--vscode-editor-background);
  --demotime-heading-background: var(--vscode-editor-foreground);
  --demotime-heading-font-weight: 900;

  --demotime-font-size: var(--vscode-editor-font-size, 1.1em);

  --demotime-bordered: 0 --demotime-link-color: var(--vscode-textLink-foreground);
  --demotime-link-active-color: var(--vscode-textLink-activeForeground);

  --demotime-code-background: var(--vscode-editor-background);
  --demotime-code-border: var(--vscode-panel-border);

  --demotime-blockquote-border: var(--vscode-textBlockQuote-border);
  --demotime-blockquote-background: var(--vscode-textBlockQuote-background);

  --demotime-default-background: var(--demotime-background);
  --demotime-default-color: var(--demotime-color);
  --demotime-default-heading-color: var(--demotime-heading-color);
  --demotime-default-heading-background: var(--demotime-heading-background);

  --demotime-intro-background: var(--demotime-background);
  --demotime-intro-color: var(--demotime-color);
  --demotime-intro-heading-color: var(--demotime-heading-color);
  --demotime-intro-heading-background: var(--demotime-heading-background);

  --demotime-quote-background: var(--demotime-background);
  --demotime-quote-color: var(--demotime-color);
  --demotime-quote-heading-color: var(--demotime-heading-color);
  --demotime-quote-heading-background: var(--demotime-heading-background);

  --demotime-section-background: var(--demotime-background);
  --demotime-section-color: var(--demotime-background);
  --demotime-section-heading-color: var(--demotime-heading-color);
  --demotime-section-heading-background: var(--demotime-heading-background);

  --demotime-image-left-background: var(--demotime-background);
  --demotime-image-left-color: var(--demotime-color);
  --demotime-image-left-heading-color: var(--demotime-heading-color);
  --demotime-image-left-heading-background: var(--demotime-heading-background);

  --demotime-image-right-background: var(--demotime-background);
  --demotime-image-right-color: var(--demotime-color);
  --demotime-image-right-heading-color: var(--demotime-heading-color);
  --demotime-image-right-heading-background: var(--demotime-heading-background);

  --demotime-two-columns-background: var(--demotime-background);
  --demotime-two-columns-color: var(--demotime-color);
  --demotime-two-columns-heading-color: var(--demotime-heading-color);
  --demotime-two-columns-heading-background: var(--demotime-heading-background);

  background: var(--demotime-background);
  color: var(--demotime-color);
  font-size: var(--demotime-font-size);

  .slide__content__inner {
    @apply p-8 space-y-4;
    box-sizing: border-box;
  }

  h1 {
    @apply text-4xl p-2 w-auto inline-block;
    background: var(--demotime-heading-background);
    color: var(--demotime-heading-color);
    font-weight: var(--demotime-heading-font-weight);

    border: calc(2 * var(--demotime-bordered)) solid var(--demotime-background);
    outline: var(--demotime-bordered) solid var(--demotime-heading-background);

    margin-left: 0;

    &:not(:first-child) {
      @apply mt-8;
    }
  }

  h2 {
    @apply text-3xl pt-4 pb-2;
  }

  h3 {
    @apply text-2xl;
  }

  h4 {
    @apply text-xl;
  }

  h5 {
    @apply text-lg;
  }

  p {
    @apply leading-relaxed;
  }

  a {
    @apply text-(--demotime-link-foreground) underline;

    &:hover {
      @apply text-(--demotime-link-activeForeground);
    }
  }

  ul,
  ol {
    @apply ml-6;

    li {
      @apply mb-2;
    }

    ul,
    ol {
      @apply mt-2;
    }
  }

  ul {
    @apply list-disc;
  }

  ol {
    @apply list-decimal;
  }

  img {
  }

  blockquote {
    @apply border-l-4 p-2 border-(--demotime-blockquote-border) bg-(--demotime-blockquote-background);
  }

  .default {
    background: var(--demotime-default-background);
    color: var(--demotime-default-color);

    h1 {
      color: var(--demotime-default-heading-color);
      background: var(--demotime-default-heading-background);
    }
  }

  .intro {
    background: var(--demotime-intro-background);
    color: var(--demotime-intro-color);

    .slide__content__inner {
      @apply w-full flex flex-col items-center justify-center;
    }

    h1 {
      @apply text-5xl w-4/6 p-4 inline-block leading-tight mx-auto;
      color: var(--demotime-intro-heading-color);
      background: var(--demotime-intro-heading-background);
      min-height: 25%;
    }

    h1 + h2,
    h1 + p {
      @apply text-2xl -mt-2 mb-4 w-4/6 mx-auto;
      color: var(--slidev-intro-heading-background);
      padding-left: calc(1rem + (2 * var(--slidev-theme-bordered)));
    }

    p + h2,
    ul + h2,
    table + h2 {
      @apply mt-10;
    }
  }

  .quote {
    background: var(--demotime-quote-background);
    color: var(--demotime-quote-color);

    .slide__content {
      @apply w-full flex flex-col justify-center;

      .slide__content__inner {
        @apply p-8 w-full h-auto;
      }
    }

    h1 {
      @apply text-5xl mb-0;
      color: var(--demotime-quote-heading-color);
      background: var(--demotime-quote-heading-background);
    }
  }

  .section {
    background: var(--demotime-section-background);
    color: var(--demotime-section-color);

    .slide__content {
      @apply px-0 w-full h-full flex items-center;

      .slide__content__inner {
        @apply p-8 w-full h-auto text-center;
        background: var(--demotime-section-heading-background);
        color: var(--demotime-section-heading-color);

        border-bottom: calc(2 * var(--demotime-bordered)) solid var(--demotime-background);
        border-top: calc(2 * var(--demotime-bordered)) solid var(--demotime-background);
        outline: var(--demotime-bordered) solid var(--demotime-section-heading-background);
      }
    }

    h1 {
      @apply text-5xl mb-0;
      background: var(--demotime-section-heading-background);
      color: var(--demotime-section-heading-color);

      border: 0;
      outline: 0;
    }

    p {
      color: var(--demotime-section-color);
    }
  }

  .image {
    .slide__content__inner {
      @apply flex flex-col items-center justify-center text-center;
    }
  }

  .image-left {
    background: var(--demotime-image-left-background);
    color: var(--demotime-image-left-color);

    .slide__content {
      @apply w-full;
    }

    h1 {
      color: var(--demotime-image-left-heading-color);
      background: var(--demotime-image-left-heading-background);
    }
  }

  .image-right {
    background: var(--demotime-image-right-background);
    color: var(--demotime-image-right-color);

    .slide__content {
      @apply w-full;
    }

    h1 {
      color: var(--demotime-image-right-heading-color);
      background: var(--demotime-image-right-heading-background);
    }
  }

  .two-columns {
    background: var(--demotime-two-columns-background);
    color: var(--demotime-two-columns-color);

    .slide__content__inner {
      @apply w-full grid grid-cols-2 gap-4 space-y-0;
    }

    .slide__left,
    .slide__right {
      @apply w-full space-y-4;
    }

    h1 {
      color: var(--demotime-two-columns-heading-color);
      background: var(--demotime-two-columns-heading-background);
    }
  }
}
