@config "../../../../tailwind.yt1.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');
  }

  /* Loader Spikes Roll */
  .vv-preloader-spikes-roll {
    background-image: linear-gradient(theme('colors.accent.DEFAULT') 60px, transparent 0),
                      linear-gradient(theme('colors.accent.DEFAULT') 60px, transparent 0),
                      linear-gradient(theme('colors.accent.DEFAULT') 60px, transparent 0),
                      linear-gradient(theme('colors.accent.DEFAULT') 60px, transparent 0),
                      linear-gradient(theme('colors.accent.DEFAULT') 60px, transparent 0),
                      linear-gradient(theme('colors.accent.DEFAULT') 60px, transparent 0),
                      linear-gradient(theme('colors.accent.DEFAULT') 60px, transparent 0),
                      linear-gradient(theme('colors.accent.DEFAULT') 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;
  }

  /* Hero Slider */
  .vv-pagination-circle-bullets .swiper-pagination-bullet-active .path {
    display: inline-block !important;
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
    @apply animate-dash;
  }
  .vv-pagination-circle-bullets .path {
    display: none;
  }

  /* Info Slider */
  .vv-channel-info-swiper-pagination > span {
    @apply w-2 h-2 rounded-full border-2 hover:cursor-pointer transition-all text-white;
  }
  .vv-channel-info-swiper-pagination > span.js-vv-pagination-bullet:not(.js-vv-pagination-bullet-active) {
    @apply border-violet-300;
  }
  .vv-channel-info-swiper-pagination > span.js-vv-pagination-bullet-active {
    @apply border-primary dark:border-white ring-2 ring-offset-2 ring-accent ring-offset-white dark:ring-offset-primary;
  }
}