app-asset-image {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: auto;

  div.image-container {
    border-radius: 4px;
    overflow: hidden;
    display: block;

    &.waves {
      display: flex;
      flex-direction: column;
      height: 56px;
      justify-content: flex-start;

      svg[wave="upward"] {
        margin-top: auto;
      }
    }
  }

  &.imgLoaded {
    div.image-container {
      box-shadow: 1px 2px 8px 2px rgba(var(--ion-color-dark-rgb), 0.2);
    }
  }

  deckgo-lazy-img {
    --deckgo-lazy-img-width: 100%;
    --deckgo-lazy-img-height: auto;
    --deckgo-lazy-img-min-height: var(--deckgo-images-min-height);
    --deckgo-lazy-img-vertical-align: top;
  }

  ion-label {
    max-width: calc(100% - 32px);
    padding-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--font-size-very-small);
    display: inline-block;
    margin-top: 4px;
  }

  ion-label.gif-category,
  ion-label.photo-credits {
    background: rgba(0, 0, 0, 0.4);
    padding: 4px 8px;
    color: white;

    a {
      color: white;
      text-decoration: inherit;

      &:hover,
      &:active {
        color: white;
      }
    }
  }

  ion-label.gif-category {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--font-size-normal);
    border-radius: 4px;
    white-space: pre-wrap;
    max-width: calc(100% - 16px);
    text-align: center;
  }

  ion-label.photo-credits {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: var(--font-size-very-small);
    border-top-left-radius: 2px;
  }
}
