ws-card-loading-indicator {
  $card-loading-indicator-height: 150px;
  $animation-time: 0.5s;

  .card-loading-indicator {
    background: url($card-loading-indicator) no-repeat center;
    min-height: $card-loading-indicator-height;
  }

  .card-loading-indicator--gray {
    background-image: url($card-loading-indicator--gray);
  }

  .card-loading-content {
    .error {
      align-items: center;
      display: flex;
      justify-content: center;
      min-height: $card-loading-indicator-height;
    }
  }

  .animate-if--no-height-transition {
    &.ng-enter,
    &.ng-leave {
      transition: $animation-time linear all;
    }

    &.ng-enter {
      opacity: 0;

      &.ng-enter-active {
        opacity: 1;
      }
    }

    &.ng-leave {
      opacity: 1;
      transition: none;

      &.ng-leave-active {
        opacity: 1;
      }
    }
  }
}
