// Theme colors
#main-wrapper {
  &[data-layout="vertical"],
  &[data-layout="horizontal"] {
    .app-container[data-navbarbg="skin1"] {
      background: $skin1;
    }

    &[data-navbarbg="skin1"] {
      .topbar {
        background: $skin1;

        .expand-logo {
          background: #4550f7;
        }
      }

      .left-sidebar:hover {
        .user-profile {
          background: #4550f7;
        }
      }
    }

    /*This is for the sidebar bg*/
    .left-sidebar {
      .scroll-sidebar {
        &[data-sidebarbg="skin6"],
        &[data-sidebarbg="skin6"] ul {
          background: $skin6;

          .user-profile-pic {
            color: $sidebar-text-dark;

            a {
              color: $sidebar-text-dark;
            }
          }

          .sidebar-nav {
            ul {
              background: $skin6;

              .list-divider {
                background: $sidebar-text-dark;
              }

              .sidebar-item {
                .sidebar-link {
                  color: $sidebar-text-dark;

                  .feather-icon,
                  i {
                    color: $sidebar-icons-dark;
                  }
                }

                .first-level {
                  .sidebar-item.active {
                    > .sidebar-link.active,
                    > .sidebar-link.active > i {
                      color: $dark;
                    }
                  }
                }

                &.selected > .sidebar-link {
                  .feather-icon,
                  i {
                    color: $white;
                  }
                }

                .first-level {
                  background: $skin6;
                }
              }

              .nav-small-cap {
                color: $dark;
              }
            }

            .has-arrow {
              &::after {
                border-color: $sidebar-text-dark;
              }
            }

            .user-content,
            .user-name,
            .user-email {
              color: $theme-dark;
            }
          }

          .sidebar-nav li.selected > .has-arrow::after,
          .sidebar-nav li.selected > .has-arrow.active::after {
            border-color: $gray-0;
          }
        }
      }
    }
  }
}

@include media-breakpoint-down(md) {
  #main-wrapper {
    &[data-layout="vertical"],
    &[data-layout="horizontal"] {
      &[data-navbarbg="skin1"] {
        .topbar {
          .navbar-collapse {
            background: $skin1;
          }
        }
      }

      .left-sidebar {
        &[data-sidebarbg="skin6"] {
          background: $skin6;

          .user-profile {
            color: $sidebar-text-dark;

            a {
              color: $sidebar-text-dark;
            }
          }
        }
      }
    }
  }
}

#main-wrapper {
  &[data-layout="horizontal"] {
    .left-sidebar {
      &[data-sidebarbg="skin6"] {
        background: $skin6;
      }
    }
  }
}
