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

/* ==========================================================================
Stories styles
========================================================================== */

/*
    0. Stories Sidebar (Desktop)
    1. StoriesLayout
*/

/* ==========================================================================
0. Stories Sidebar (Desktop)
========================================================================== */

body {
  &.is-dark {
    .stories-wrapper {
      .stories-sidebar {
        background: darken($dark, 2%);
        border-color: lighten($dark, 4%);

        .stories-sidebar-inner {
          border-color: lighten($dark, 4%);

          .user-block {
            border-color: lighten($dark, 8%);

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

              .badge {
                border-color: darken($dark, 2%);
              }
            }

            > h4 {
              color: $white-light;
            }

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

          .user-stats {
            .stat-block {
              span {
                &:first-child {
                  color: $white-light;
                  font-weight: 500;
                }

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

          .user-menu {
            .user-menu-inner {
              .menu-block {
                ul {
                  li {
                    a span {
                      color: $light-text;
                    }
                  }
                }
              }

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

      .stories-content {
        .section-title {
          h2 {
            color: $white-light;
          }

          .view-all {
            background: darken($dark, 5%);
            border-color: darken($dark, 5%);
            color: $light-text;

            &:hover {
              background: $accent;
              border-color: $accent;
              color: $white;
            }
          }

          .dropdown {
            &:hover {
              > div {
                .button {
                  border-color: lighten($dark, 5%);
                }
              }
            }

            > div {
              .button {
                background: $dark;
                border-color: $dark;
                color: $white-light;
              }
            }
          }
        }

        .stories-container {
          .container-inner {
            .story {
              .story-avatar {
                background: lighten($dark, 16%);
                border-color: lighten($dark, 16%);

                &:hover {
                  border-color: $accent;
                }
              }
            }
          }
        }

        .stories-feed {
          .story-feed-item {
            .item-meta {
              .user-info {
                span {
                  color: $white-light;
                }
              }

              .item-stats {
                .stat-item {
                  span {
                    color: $light-text;
                  }

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

/* ==========================================================================
1. Stories Layout
========================================================================== */

body {
  &.is-dark {
    .story-post-wrapper {
      .story-post {
        .post-title {
          h2 {
            color: $white-light;
          }

          .dropdown {
            &:hover {
              > div {
                .button {
                  border-color: lighten($dark, 5%);
                }
              }
            }

            > div {
              .button {
                background: $dark;
                border-color: $dark;
                color: $white-light;
              }
            }
          }
        }

        .post-meta {
          .post-author {
            .story-avatar {
              background: lighten($dark, 16%);
              border-color: lighten($dark, 16%);
            }

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

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

          .post-stats {
            .stat-item {
              span {
                color: $light-text;
              }

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

        .post-text {
          p {
            color: $light-text !important;

            b {
              font-weight: 500;
              color: $accent;
            }
          }
        }

        .post-tags {
          .tags {
            .tag {
              background: $dark;
              border-color: $dark;
              color: $white-light;
            }
          }
        }

        .post-compose {
          background: darken($dark, 2%);
          border-color: lighten($dark, 4%);

          .control {
            .textarea {
              background: darken($dark, 2%);
              border-color: darken($dark, 2%);
              color: $white-light;

              &::placeholder {
                color: lighten($dark, 24%);
              }
            }
          }

          .compose-controls {
            border-color: lighten($dark, 10%);

            .compose-actions {
              .action {
                background: lighten($dark, 2%);

                &:hover {
                  background: lighten($dark, 6%);

                  svg {
                    stroke: $accent;
                  }
                }
              }
            }
          }
        }

        .comments-wrap {
          .comments-count {
            h3 {
              color: $white-light;
            }
          }

          .media {
            &.is-comment {
              border-color: lighten($dark, 20%);

              .media-left {
                .avatar-wrap {
                  border-color: lighten($dark, 20%);

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

              .media-content {
                .comment-meta {
                  h4 {
                    a {
                      color: $white-light;
                      font-weight: 500;

                      &:hover {
                        color: $accent;
                      }
                    }

                    small {
                      color: $light-text;
                    }
                  }

                  p {
                    color: $light-text;
                  }
                }

                .comment-stats-wrap {
                  .comment-stats {
                    .stat {
                      span {
                        color: $light-text;
                      }

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

                  .comment-actions {
                    .comment-action {
                      border-color: lighten($dark, 15%);
                      background: lighten($dark, 15%);

                      &.is-reply:hover {
                        svg {
                          stroke: $accent;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    .story-post-sidebar {
      background: darken($dark, 2%);
      border-color: lighten($dark, 4%);

      &.is-full {
        background: none !important;
        border-color: transparent !important;
      }

      .header {
        h2 {
          color: $white-light;
        }
      }

      .related-posts {
        .related-post {
          .meta {
            h3 {
              color: $white-light;
            }

            .user-line {
              span {
                color: $light-text;
              }
            }
          }
        }
      }
    }
  }
}
