/*! _app-questions-dark.scss | Friendkit | © Css Ninja. 2020-2021 */

/* ==========================================================================
Questions dark styles
========================================================================== */

/*
    0. Questions Tabs
    1. Questions Wrapper & Layout
    2. Question Content
    3. Other questions
    4. Questions navigation bar
    5. Questions Categories header
    6. Questions Category box
    7. Questions Statistics
    8. Questions Settings
    9. Media Queries
*/

/* ==========================================================================
0. Questions Tabs
========================================================================== */

body {
  &.is-dark {
    .question-tabs {
      background: lighten($dark, 4%);
      border-color: lighten($dark, 12%);

      ul li {
        &:not(.is-active) {
          a {
            color: $light-text;
          }

          &:hover {
            a {
              color: $white-light !important;
            }
          }
        }
      }
    }
  }
}

/* ==========================================================================
1. Questions Wrapper & Layout
========================================================================== */

body {
  &.is-dark {
    .questions-wrap,
    .questions-demo {
      .questions-menu {
        li {
          &:not(.is-active) {
            a {
              svg {
                stroke: $light-text;
              }

              span {
                color: $light-text;
              }
            }
          }

          &.is-active {
            a {
              background: lighten($dark, 4%);
              border-color: lighten($dark, 12%);
            }
          }
        }
      }
    }
  }
}

/* ==========================================================================
2. Question Content
========================================================================== */

body {
  &.is-dark {
    .question-content {
      .question-block,
      .answer-block {
        border-color: lighten($dark, 15%);

        &:not(.is-best) {
          .answer-footer {
            .upvote {
              .upvote-icon {
                background: lighten($dark, 4%);
                border-color: lighten($dark, 12%);
              }
            }
          }
        }

        .question-title {
          &.is-link {
            &:not(:hover) {
              color: $white-light;
            }
          }

          color: $white-light;
        }

        .question-author,
        .answer-author {
          .meta {
            span {
              &:first-child {
                color: $white-light;
              }

              &:nth-child(2) {
                color: $light-text;
              }
            }
          }
        }

        .question-text,
        .answer-text {
          > p {
            color: $light-text;

            &.code {
              background: lighten($dark, 4%);
            }
          }

          .tags {
            .tag {
              background: lighten($dark, 4%);
              border-color: lighten($dark, 12%);
              color: $white-light;
            }
          }
        }

        .question-footer,
        .answer-footer {
          .likes,
          .report,
          .upvote {
            .report-icon {
              background: lighten($dark, 4%);
              border-color: lighten($dark, 12%);
              color: $white-light;
            }

            span {
              color: $light-text;
            }
          }
        }

        .answers-count {
          span {
            color: $light-text;
          }
        }
      }

      .top-single-header {
        .button {
          background: lighten($dark, 4%);
          border-color: lighten($dark, 12%);
          color: $white-light;
        }
      }
    }
  }
}

/* ==========================================================================
3. Other questions
========================================================================== */

body {
  &.is-dark {
    .other-questions {
      .other-title {
        color: $white-light;
      }

      .other-question {
        border-color: lighten($dark, 15%);

        .meta {
          a {
            &:not(:hover) {
              color: $white-light;
            }
          }

          span {
            color: $light-text;
          }
        }
      }
    }
  }
}

/* ==========================================================================
4. Questions navigation bar
========================================================================== */

body {
  &.is-dark {
    .questions-nav {
      background: darken($dark, 2%);
      border-color: darken($dark, 2%);

      .inner {
        .questions-nav-menu {
          .menu-item {
            &.is-active {
              background: lighten($dark, 4%);
            }

            &:not(.is-active):not(:hover) {
              span {
                color: $light-text;
              }

              svg {
                stroke: $light-text;
              }
            }
          }
        }

        .question-summary {
          .meta {
            h4 {
              color: $white-light;
            }

            span {
              color: $light-text;
            }
          }

          .dropdown {
            &:hover {
              > div .button {
                svg {
                  stroke: $light-text;
                }
              }
            }

            > div .button {
              background: darken($dark, 2%);
              border-color: lighten($dark, 8%);
            }
          }
        }
      }
    }
  }
}

/* ==========================================================================
5. Questions Categories header
========================================================================== */

body {
  &.is-dark {
    .categories-header {
      border-color: lighten($dark, 15%);

      h2 {
        color: $white-light;
      }

      .control {
        .input {
          &:focus {
            border-color: lighten($dark, 14%);
          }
        }
      }
    }

    .category-box {
      background: $dark;
      border-color: lighten($dark, 14%);

      &:hover {
        .box-content {
          h3 {
            color: $accent;
          }
        }
      }

      .box-content {
        h3 {
          color: $white-light;
        }

        p {
          color: $light-text;
        }
      }
    }
  }
}

/* ==========================================================================
7. Questions Statistics
========================================================================== */
body {
  &.is-dark {
    .stats-wrapper {
      .stats-header {
        background: $dark;
        border-color: lighten($dark, 14%);

        .avatar-wrapper {
          border-color: lighten($dark, 14%);

          .badge {
            border-color: $dark;
          }
        }

        .user-info {
          h4 {
            color: $white-light;
          }

          p {
            color: $light-text;
          }

          .button {
            background: $dark;
          }
        }

        .main-stats {
          .stat-block {
            border-color: lighten($dark, 18%);

            h4 {
              color: $light-text;
            }

            p {
              color: $white-light;
            }
          }
        }
      }

      .achievements {
        .header {
          h3 {
            color: $white-light;
          }
        }

        .achievements-carousel-wrap {
          .achievements-loader {
            background: lighten($dark, 8%);
          }

          .achievement {
            background: $dark;
            border-color: lighten($dark, 14%);

            h3 {
              color: $white-light;
            }

            p {
              color: $light-text;
            }
          }
        }
      }

      .quick-activity {
        .header {
          border-color: lighten($dark, 14%);

          h3 {
            color: $white-light;
          }
        }

        .activity-list {
          .activity-item {
            border-color: lighten($dark, 14%);

            &.is-best {
              .avatar-wrap {
                border-color: $green;

                .badge {
                  border-color: lighten($dark, 8%);
                }
              }
            }

            .avatar-wrap {
              border-color: lighten($dark, 14%);
            }

            .meta {
              span {
                &:first-child {
                  color: $white-light;
                  font-weight: 500;
                }

                &:nth-child(2) {
                  color: $light-text;

                  a {
                    color: $accent;
                  }
                }
              }

              small {
                color: $light-text;
              }
            }
          }
        }
      }
    }

    .questions-side-card {
      background: $dark;
      border-color: lighten($dark, 14%);

      h4 {
        color: $white-light;
      }

      p {
        color: $light-text;
      }
    }
  }
}

/* ==========================================================================
8. Questions Settings
========================================================================== */

body {
  &.is-dark {
    .questions-wrap {
      .questions-settings {
        .settings-header {
          border-color: lighten($dark, 15%);

          h2 {
            color: $white-light;
          }
        }

        .settings-body {
          .switch-block {
            span {
              &:first-child {
                color: $white-light;
              }

              &:nth-child(2) {
                color: $light-text;
              }
            }
          }
        }
      }
    }
  }
}
