@keyframes card-loading-animation {
  0% {
    transform: translate3d(-30%, 0, 0);
  }

  100% {
    transform: translate3d(30%, 0, 0);
  }
}

// Some of the properties must be kept in sync with
// `modules/database/utils/card.js::cardHeight`. This is because the kanban and gallery
// view needs to know the height of each card in order to paginate correctly. If
// properties that influence the height and added or changed, we most likely need to
// make a change in the KanbanView.vue::cardHeight method. These are properties like
// margin-top, margin-bottom, padding-top, padding-bottom, height, line-height, etc
.card {
  position: relative;
  background-color: $white;

  @include add-elevation($elevation-low);
  @include rounded($rounded);

  &--loading {
    overflow: hidden;

    &::before {
      z-index: 1;
      width: 500%;
      margin-left: -250%;
      background: linear-gradient(
          to right,
          rgba(255, 255, 255, 0) 46%,
          rgba(255, 255, 255, 0.35) 50%,
          rgba(255, 255, 255, 0) 54%
        )
        50% 50%;
      animation: card-loading-animation 0.8s linear infinite;
      content: ' ';
      pointer-events: none;

      @include absolute(0, 0, 0, 50%);
    }
  }
}

.card__cover-empty-image {
  position: absolute;
  font-size: 40px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  color: $color-neutral-400;
}

.card__cover {
  position: relative;
  height: 160px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  overflow: hidden;
  background-color: $color-neutral-100;
}

.card__cover-image {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.card__content {
  display: flex;
}

.card__fields {
  padding: 16px 0;
  overflow: auto;
}

.card__field {
  padding: 0 16px;

  &:not(:last-child) {
    margin-bottom: 10px;
  }
}

.card__field-name {
  @extend %ellipsis;

  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  margin-bottom: 6px;

  .card--loading & {
    color: $color-neutral-100;
    background-color: $color-neutral-100;
  }
}

.card__field-value {
  width: 100%;

  .card--loading & {
    width: 50%;
    background-color: $color-neutral-100;
    height: 13px;
  }
}