app-sidebar {

  @include themify($themes) {
    background-color: themed(sidebarBackgroundColor);
  }

  .sidebar-accounts {

    .sidebar-accounts-header {

      h3 {

        @include themify($themes) {
          color: themed(mainTextColor);
        }
      }

      button {

        @include themify($themes) {
          color: themed(blueTextColor);
        }
      }
    }

    .sidebar-accounts-list {

      .sidebar-account {

        @include themify($themes) {
          background-color: transparent;
          color: themed(mainTextColor);
        }

        .icon {

          @include themify($themes) {
            background-color: themed(blueTextColor);
          }
        }

        .sidebar-account-row {

          .text {

            @include themify($themes) {
              color: themed(optionalTextColor);
            }
          }

          .icon {

            @include themify($themes) {
              background-color: themed(blueTextColor);
            }
          }

          .indicator {

            @include themify($themes) {
              background-color: themed(blueButtonBackgroundColor);
              color: themed(alternativeTextColor);
            }
          }

          .progress-bar-container {

            .progress-bar {

              @include themify($themes) {
                background-color: themed(progressBarBackgroundColor);
              }

              .fill {

                @include themify($themes) {
                  background-color: themed(blueTextColor);
                }
              }
            }
          }

          &.account-synchronization {

            @include themify($themes) {
              color: themed(optionalTextColor);
            }
          }
        }

        &.active {

          @include themify($themes) {
            background-color: themed(accountBackgroundColor);
            color: themed(accountMainTextColor);
          }

          .sidebar-account-row {

            .text {

              @include themify($themes) {
                color: themed(accountOptionalTextColor);
              }
            }

            .indicator {

              @include themify($themes) {
                background-color: themed(accountIndicatorBackgroundColor);
                color: themed(accountIndicatorTextColor);
              }
            }

            .switch {

              @include themify($themes) {
                background-color: themed(accountSwitchBackgroundColor);
                color: themed(mainTextColor);
              }
            }

            &.account-synchronization {

              @include themify($themes) {
                color: themed(accountOptionalTextColor);
              }
            }
          }
        }

        &:hover:not(.active) {

          @include themify($themes) {
            background-color: themed(accountHoverBackgroundColor);
          }
        }
      }
    }

    &:after {

      @include themify($themes) {
        background: linear-gradient(to bottom, transparent 0%, themed(sidebarBackgroundColor) 100%);
      }
    }
  }

  .sidebar-settings {

    @include themify($themes) {
      border-bottom: 0.2rem solid themed(sidebarBorderColor);
    }

    .wrap-button {

      button {

        @include themify($themes) {
          color: themed(mainTextColor);
        }

        .icon {

          @include themify($themes) {
            background-color: themed(blueTextColor);
          }
        }
      }

      &.active {

        button {

          @include themify($themes) {
            background-color: themed(accountBackgroundColor)!important;
            color: themed(accountMainTextColor)!important;
          }

          .icon {

            @include themify($themes) {
              background-color: themed(accountIndicatorBackgroundColor)!important;
            }
          }
        }
      }
    }
  }

  .sidebar-synchronization-status {

    @include themify($themes) {
      color: themed(optionalTextColor);
    }

    .status-container {

      .offline:before {

        @include themify($themes) {
          background-color: themed(offlineColor);
        }
      }

      .online:before {

        @include themify($themes) {
          background-color: themed(onlineColor);
        }
      }

      .progress-bar-container {

        .syncing {

          .progress-bar {

            @include themify($themes) {
              background-color: themed(progressBarBackgroundColor);
            }

            .fill {

              @include themify($themes) {
                background-color: themed(progressBarFullBackgroundColor);
              }
            }
          }

          &.downloading {

            .progress-bar {

              @include themify($themes) {
                background-color: themed(progressBarBackgroundColor);
              }

              .fill {

                @include themify($themes) {
                  background-color: themed(blueTextColor);
                }
              }
            }
          }
        }

        .loading {

          @include themify($themes) {
            background-color: themed(progressBarFullBackgroundColor);
          }
        }
      }
    }

    .update-container {

      .standard {

        @include themify($themes) {
          color: themed(blueTextColor);
        }
      }

      .important {

        @include themify($themes) {
          color: themed(orangeTextColor);
        }
      }

      .critical {

        @include themify($themes) {
          color: themed(redTextColor);
        }
      }

      .time {

        @include themify($themes) {
          color: themed(orangeTextColor);
        }
      }

      .icon {

        &.standard {

          @include themify($themes) {
            background-color: themed(blueTextColor);
          }
        }

        &.important {

          @include themify($themes) {
            background-color: themed(orangeTextColor);
          }
        }

        &.critical {

          @include themify($themes) {
            background-color: themed(redTextColor);
          }
        }

        &.time {

          @include themify($themes) {
            background-color: themed(orangeTextColor);
          }
        }
      }
    }
  }
}
