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

/* ==========================================================================
Settings styles
========================================================================== */

/*
    0. Settings Sidebar
    1. Settings Layout
*/

/* ==========================================================================
0. Settings Sidebar
========================================================================== */

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

      .settings-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%);
            }
          }
        }
      }
    }
  }
}

/* ==========================================================================
1. Settings Layout
========================================================================== */

body {
  &.is-dark {
    .settings-wrapper {
      .settings-section {
        .settings-panel {
          border-color: lighten($dark, 4%);
          background: $dark;

          .title-wrap {
            h2 {
              color: $white-light;
            }
          }

          .settings-form-wrapper {
            .settings-form {
              .field-group {
                background: lighten($dark, 2%) !important;
                border-color: lighten($dark, 10%);

                > label {
                  color: $light-text;
                }

                .control {
                  .input,
                  .textarea {
                    background: lighten($dark, 2%) !important;
                    color: $white-light;
                  }

                  .easy-autocomplete {
                    .input {
                      background: lighten($dark, 2%) !important;
                    }
                  }
                }
              }

              .setting-sublink {
                background: lighten($dark, 5%);
                border-color: lighten($dark, 13%);

                .link-content {
                  .link-icon {
                    background: lighten($dark, 10%);
                    border-color: lighten($dark, 18%);
                  }

                  h4 {
                    color: $white-light;
                  }

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

              .switch-block {
                .meta {
                  h4 {
                    color: $white-light;
                  }

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

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

              .buttons {
                .button:not(.accent-button) {
                  background: darken($dark, 2%);
                  border-color: lighten($dark, 10%);
                  color: $white-light;
                }
              }
            }

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