@config "../../../../tailwind.yt2.config.js";
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {

  /* Lightbox Player */
  :root {
    --plyr-color-main: theme('colors.accent.DEFAULT');
  }
}

@layer components {
  .sub-menu {
    transform: rotateX(-75deg);
  }

  /* OL */
  .list-ol {
    counter-reset: listol;
  }

  .list-ol li {
    counter-increment: listol;
  }

  .list-ol li::before {
    content: counters(listol, '') '. ';
    @apply text-primary dark:text-white font-bold;
  }

  /* Social */
  .vv-social-list-color a[href*="facebook.com"] {
    background-color: theme('colors.social.facebook');
  }

  .vv-social-list-color a[href*="twitter.com"] {
    background-color: theme('colors.social.twitter');
  }

  .vv-social-list-color a[href*="instagram.com"] {
    background-color: theme('colors.social.instagram');
  }

  .vv-social-list-color a[href*="youtube.com"] {
    background-color: theme('colors.social.youtube');
  }

  .vv-social-list-color a[href*="discord.com"] {
    background-color: theme('colors.social.discord');
  }

  .vv-social-list-color a[href*="twitch.tv"] {
    background-color: theme('colors.social.twitch');
  }

  /* Loader Spikes Roll */
  .vv-preloader-spikes-roll {
    background-image: linear-gradient(#1a38f5 60px, transparent 0),
      linear-gradient(#174cf4 60px, transparent 0),
      linear-gradient(#1465f4 60px, transparent 0),
      linear-gradient(#0f89f3 60px, transparent 0),
      linear-gradient(#0baaf2 60px, transparent 0),
      linear-gradient(#07c7f1 60px, transparent 0),
      linear-gradient(#03eaf1 60px, transparent 0),
      linear-gradient(#01f9f0 60px, transparent 0);
  }

  /* Checkbox */
  [type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 12 10' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.007,2.506 L4.799,10.007 L-0.007,5.007 L2.396,2.506 L4.799,5.007 L9.604,0.006 L12.007,2.506 Z'/%3e%3c/svg%3e");
    background-size: 50% auto;
  }

  /* Content */
  .vv-prose {
    @apply prose max-w-none pb-12 text-base text-gray-500 prose-p:text-gray-500 prose-h3:font-bold prose-h4:tracking-tight prose-p:tracking-tighter prose-blockquote:border-0 prose-blockquote:pl-0 prose-blockquote:text-center prose-blockquote:not-italic prose-blockquote:text-primary prose-figcaption:text-center prose-ol:p-0 prose-ol:text-primary prose-ul:text-primary prose-li:my-6 prose-li:flex prose-li:gap-4 prose-li:pl-0 prose-lead:tracking-tighter prose-lead:text-base prose-lead:text-primary md:pb-20 lg:prose-lg lg:pb-28 lg:leading-loose lg:prose-headings:text-primary lg:prose-h2:text-[42px] lg:prose-h2:leading-tight lg:prose-h2:tracking-tight lg:prose-h3:text-[38px] lg:prose-h3:leading-tight lg:prose-h3:tracking-tight lg:prose-h4:text-[34px] lg:prose-h4:font-bold lg:prose-h4:leading-tighter lg:prose-h5:text-[28px] lg:prose-h5:font-bold lg:prose-h5:leading-tight lg:prose-h6:text-2xl lg:prose-h6:font-bold lg:prose-p:my-8 lg:prose-blockquote:pl-0 lg:prose-blockquote:text-1.5xl lg:prose-blockquote:leading-9 lg:prose-blockquote:tracking-tighter lg:prose-ul:p-0 lg:prose-li:my-6 lg:prose-li:pl-0 lg:prose-lead:mb-14 lg:prose-lead:text-[26px] lg:prose-lead:leading-relaxed prose-strong:text-primary dark:prose-strong:text-white dark:prose-blockquote:text-white dark:prose-ol:text-white dark:prose-ul:text-white dark:prose-lead:text-white dark:lg:prose-headings:text-white;
  }
}