ModalGallery.scss

@use '../../../styling/utils';

.str-chat__message {
  --str-chat__modal-gallery-load-failed-indicator-background: var(--accent-error);
  --str-chat__modal-gallery-load-failed-indicator-color: var(--text-on-inverse);
  --str-chat__modal-gallery-loading-background: var(--chat-bg);
  --str-chat__modal-gallery-loading-base: var(--skeleton-loading-base);
  --str-chat__modal-gallery-loading-highlight: var(--skeleton-loading-highlight);
}

.str-chat__attachment-list {
  .str-chat__message-attachment--gallery {
    $max-width: var(--str-chat__attachment-max-width);

    .str-chat__modal-gallery {
      @include utils.component-layer-overrides('image-gallery-attachment');
      display: grid;
      grid-template-columns: 50% 50%;
      grid-template-rows: 50% 50%;
      overflow: hidden;
      border-radius: var(--radius-lg);
      gap: var(--space-2);
      width: $max-width;
      max-width: $max-width;
      // CDN resize requires height/max-height to be present on the img element, this rule ensures that
      height: var(--str-chat__attachment-max-width);

      .str-chat__modal-gallery__image {
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
      }

      &.str-chat__modal-gallery--two-images {
        grid-template-rows: 1fr;
      }

      &.str-chat__modal-gallery--three-images {
        .str-chat__modal-gallery__image:nth-child(1) {
          grid-column: 1;
          grid-row: 1 / span 2; /* Span two rows */
        }

        .str-chat__modal-gallery__image:nth-child(2) {
          grid-column: 2;
          grid-row: 1;
        }

        .str-chat__modal-gallery__image:nth-child(3) {
          grid-column: 2;
          grid-row: 2;
        }
      }

      .str-chat__modal-gallery__placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        background-size: cover;
        background-position: top left;
        background-repeat: no-repeat;
        margin: 0;
        cursor: zoom-in;
        // CDN resize requires max-width to be present on this element
        max-width: $max-width;
        color: var(--text-on-inverse);
        border: none;
        font-size: var(--typography-font-size-2xl);
        font-weight: var(--typography-font-weight-medium);
        line-height: var(--typography-line-height-relaxed);

        inset: 0;
        position: absolute;
        background-color: var(--background-core-scrim);
      }
    }
  }

  .str-chat__message-attachment--giphy,
  .str-chat__message-attachment--gallery,
  .str-chat__message-attachment--image {
    $max-width: var(--str-chat__attachment-max-width);

    .str-chat__modal-gallery__image {
      @include utils.button-reset;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      overflow: hidden;
      position: relative;
      // todo: we do not know the image background color;
      background-color: transparent;
      border: 0;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        cursor: zoom-in;
        // CDN resize requires max-width to be present on this element
        max-width: $max-width;
        transition: opacity 150ms ease-in-out;
      }

      &.str-chat__modal-gallery__image--loading {
        img {
          opacity: 0;
        }
      }

      &.str-chat__modal-gallery__image--load-failed {
        cursor: pointer;

        img {
          opacity: 0;
          cursor: pointer;
        }
      }

      .str-chat__modal-gallery__image-load-failed-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
      }

      .str-chat__modal-gallery__image-loading-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--str-chat__modal-gallery-loading-background);
        background-image: linear-gradient(
          90deg,
          var(--str-chat__modal-gallery-loading-base) 0%,
          var(--str-chat__modal-gallery-loading-highlight) 50%,
          var(--str-chat__modal-gallery-loading-base) 100%
        );
        background-repeat: no-repeat;
        background-size: 200% 100%;
        animation: str-chat__modal-gallery-loading-shimmer 1.2s linear infinite;
        pointer-events: none;

        .str-chat__loading-indicator {
          position: relative;
          z-index: 1;
          width: var(--icon-size-lg);
          height: var(--icon-size-lg);
        }
      }

      .str-chat__modal-gallery__image-retry-indicator {
        @include utils.flex-row-center;
        position: relative;
        z-index: 1;
        width: 2.75rem;
        height: 2.75rem;
        border-radius: var(--radius-max);
        background-color: var(--str-chat__modal-gallery-load-failed-indicator-background);
        color: var(--str-chat__modal-gallery-load-failed-indicator-color);

        svg {
          width: 1.125rem;
          height: 1.125rem;
        }
      }

      &:hover::after {
        background-color: rgba(0, 0, 0, 0.1);
      }

      &:focus-visible {
        @include utils.focusable;
      }
    }
  }
}

@keyframes str-chat__modal-gallery-loading-shimmer {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: -200% 0;
  }
}