@keyframes card-loading-opacity-animation {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

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;
    }
  }

  .card-loading-fade-in {
    animation: card-loading-opacity-animation $animation-time;
  }
}
