/* =================
    Theme Base
   =================*/

:root {
  --color-primary: #FA1AE4;
  --color-secondary: #000D38;
  --color-paragraph: #7B7E86;
  --color-white: #ffffff;
  --color-white2: #D9D9D9;
  --color-white3: #F1EFFC;
  --color-white4: #F6F2F2;
  --color-white5: #E4E4E4;
  --color-white6: #FFF6E9;
  --color-white7: #FCF4F4;
  --color-white8: #F9F0F0;
  --color-white9: #D2D2D2;
  --color-black: #000;
  --color-black2: #27272c;
  --color-fashion: #AC27C4;
  --color-musics: #FD3A98;
  --color-sports: #213873;
  --color-helth: #078871;
  --color-sculpture: #FE6741;
  --color-advacer: #1501FF;
  --color-political: #F00;
  --color-animal: #1F7E34;
  --color-travel: #F93;
  --color-green: #07382E;
  --title-font: "Playfair Display", serif;
  --body-font: "Cabin", sans-serif;
  --dark-mode: #0b1020
}

//   Color
$color-primary: var(--color-primary);
$color-secondary: var(--color-secondary);
$color-paragraph: var(--color-paragraph);
$color-white: var(--color-white);
$color-white2: var(--color-white2);
$color-white3: var(--color-white3);
$color-white4: var(--color-white4);
$color-white5: var(--color-white5);
$color-white6: var(--color-white6);
$color-white7: var(--color-white7);
$color-white8: var(--color-white8);
$color-white9: var(--color-white9);
$color-black: var(--color-black);
$color-black2: var(--color-black2);
$color-fashion: var(--color-fashion);
$color-musics: var(--color-musics);
$color-sports: var(--color-sports);
$color-helth: var(--color-helth);
$color-sculpture: var(--color-sculpture);
$color-advacer: var(--color-advacer);
$color-political: var(--color-political);
$color-animal: var(--color-animal);
$color-travel: var(--color-travel);
$color-green: var(--color-green);
$title-font: var(--title-font);
$body-font: var(--body-font);
$body-dark-mode: var(--body-dark-mode);



body.dark-theme {
  background-color: var(--dark-mode);

  .sf-menu {
    >li {
      a {
        color: var(--color-white);
      }
    }
  }

  .header-menu-wrapper ul ul li {
    a {
      color: $color-secondary;

      &:hover {
        color: $color-white;
      }
    }

    &:hover {
      background: $color-primary;
    }
  }

  .switch {
    background: $color-primary;
  }

  .section-title-wrap {
    .big-title {
      color: $color-white;
    }
  }

  .weekend-card {
    .news-blog-content {
      .blog-title {
        a {
          color: $color-white;

          &:hover {
            color: $color-primary;
          }
        }
      }

      &.v3 {
        background: var(--dark-mode);
      }
    }
  }

  .most-popular-list {
    background: $color-black2;

    .card-wrapper {
      .popular-title {
        a {
          color: $color-white;
        }
      }

    }
  }

  .subscribe-instagram-title {
    .big-title {
      color: $color-white;
    }
  }

  .footer-content {
    background: $color-black2;

    .widget-para {
      color: $color-white;
    }

    .popular-title {
      color: $color-white;
    }
  }

  .quick-links {
    .quick-links-list a {
      color: $color-white;

      &:hover {
        color: $color-primary;
      }
    }
  }

  .popular-post-list-card {
    .post-list-content {
      .list-title {
        a {
          color: $color-white;

          &:hover {
            color: $color-primary;
          }
        }
      }
    }
  }

  .copyright-area {
    background: $color-black2;
  }

  .most-popular-left-content {
    .news-blog-content {
      .blog-title {
        a {
          color: $color-white;

          &:hover {
            color: $color-primary;
          }
        }
      }
    }
  }

  .latest-news,
  .trending-stories {
    background: $color-black2;
  }

  .trending-pagination-wrapper {
    .swiper-pagination-bullet {
      color: $color-white;

      &.swiper-pagination-bullet-active {
        color: $color-primary;
      }
    }
  }

  .copyright-inner {
    .site-info {
      a {
        color: $color-white;

        &:hover {
          color: $color-primary;
        }
      }
    }
  }

  .news-tag-category-btn {
    transition: all 0.4s ease;

    &:hover {
      background: $color-white;
      color: $color-black;
    }
  }

  .tranding-stories-card {
    .stories-card-title {
      a {
        color: $color-white;

        &:hover {
          color: $color-primary;
        }
      }
    }
  }

  .header-search-box {
    a {
      color: $color-white;

      &:hover {
        color: $color-primary;
      }
    }
  }

  .page-title-wrapper {
    .page-title-inner {
      ul {
        li {
          span {
            color: $color-white;
          }

          a {
            color: $color-white;

            &:hover {
              color: $color-primary;
            }
          }
        }
      }
    }
  }

  .single-post-item {
    background: $color-black2;

    .post-content-wrapper {
      .post-title {
        a {
          color: $color-white;

          &:hover {
            color: $color-primary;
          }
        }
      }
    }
  }

  .single-post-item {
    .post-content-wrapper {
      .post-footer {
        .tag-title {
          color: $color-white;
        }
      }
    }
  }

  .single-post-item {
    .post-content-wrapper {
      .post-footer {
        .post-read-more {
          a {
            color: $color-white;

            &:hover {
              color: $color-primary;
            }
          }
        }
      }
    }
  }

  .footer-content {
    &.v2 {
      .footer-widget.tranding-news .footer-widget-title {
        color: $color-white;
      }

      .footer-widget.tags .footer-widget-title {
        color: $color-white;
      }

      .footer-widget.category {
        .footer-widget-title {
          color: $color-white;
        }
      }
    }
  }

  .page-wrapper {
    .widget {
      background: $color-black2;

      .widget-title {
        color: $color-white;
      }

      .wp-block-categories {
        li {
          a {
            color: $color-white;

            &:hover {
              color: $color-primary;
            }
          }
        }
      }
    }
  }

  .wp-block-tag-cloud a {
    &:hover {

      background: $color-white;
      color: $color-secondary;
    }
  }

  .footer-content {
    &.v2 {
      .footer-widget {
        &.tags {
          ul {
            li {
              a {
                &:hover {
                  background: $color-white;
                  color: $color-black;
                }
              }
            }
          }
        }

        &.tranding-news {
          >ul {
            li {
              .tranding-recent-post-title-and-date {
                .tranding-recent-post-widget-title {
                  color: $color-white;

                  &:hover {
                    color: $color-primary;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .footer-content{
    &.v2 {
      .footer-widget{
        &.category {
          ul {
            li {
              a {
                color: $color-white;
            
                &::before {
                  background: $color-white;
                }
                &:hover{
color: $color-primary;
&::before{
  background: $color-primary;
}
                }
              }
            }
          }
        }
      }
    }
  }

  .post-details-wrapper article {
    .post-title {
      color: $color-white;
    }
  }

  .comment-respond {
    background: $color-black2;
    color: $color-white;

    .comments-heading {
      color: $color-white;
    }

    .news-magazin-button {
      &:hover {
        background: $color-white;
        color: $color-black;
      }
    }
  }

  .author-info-wrapper {
    .author-info-box {
      .author-info {
        a {
          color: $color-white;
        }
      }
    }
  }

  .tags-links {
    a {
      &:hover {
        background: $color-white;
        color: $color-black;
      }
    }
  }
  .post-content-wrapper{
    background: $color-black2;
    .entry-content{
      strong{
        color: $color-white2;
      }
      a{
        color: $color-white;
        &:hover{
color: $color-primary;
        }
      }
    }
  }
  .author-info-wrapper{
    background: $color-black2;
  }
  .comment-respond{
    input,textarea{
      background: $color-black;
      &::placeholder{
        color: $color-white !important;
      }
    }
  }
}