@image-preview-swipe-indicators-text-color: #ddd;
@image-preview-swipe-indicators-padding: 16px 0;
@image-preview-zoom-container-background: rgba(0,0,0,0.9);
@image-preview-close-icon-top: 13px;
@image-preview-close-icon-right: 14px;
@image-preview-close-icon-size: 20px;
@image-preview-close-icon-color: #c8c9cc;

:root {
  --image-preview-swipe-indicators-text-color: @image-preview-swipe-indicators-text-color;
  --image-preview-swipe-indicators-padding: @image-preview-swipe-indicators-padding;
  --image-preview-zoom-container-background: @image-preview-zoom-container-background;
  --image-preview-close-icon-top: @image-preview-close-icon-top;
  --image-preview-close-icon-right: @image-preview-close-icon-right;
  --image-preview-close-icon-size: @image-preview-close-icon-size;
  --image-preview-close-icon-color: @image-preview-close-icon-color;
}

.ppsv-image-preview {
  transform: none;
  &__popup[ppsv-image-preview-cover] {
    background: transparent;
  }

  &__swipe[ppsv-image-preview-cover] {
    width: 100vw;
    height: 100vh;
  }

  &__swipe-item[ppsv-image-preview-cover] {
    overflow: hidden;
  }

  &__close-icon[ppsv-image-preview-cover] {
    position: absolute;
    top: var(--image-preview-close-icon-top);
    right: var(--image-preview-close-icon-right);
    color: var(--image-preview-close-icon-color);
    font-size: var(--image-preview-close-icon-size);
    cursor: pointer;
  }

  &__indicators {
    position: absolute;
    top: 0;
    width: 100%;
    padding: var(--image-preview-swipe-indicators-padding);
    color: var(--image-preview-swipe-indicators-text-color);
    text-align: center;
  }

  &__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    -webkit-user-drag: none;
    transition-property: transform;
  }

  &__zoom-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    transition: transform 0.2s;
    background: var(--image-preview-zoom-container-background);
  }
  &__error,
  &__loading {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size-md);
    background: var(--image-preview-zoom-container-background);
    color: var(--color-desc);
    vertical-align: middle;
    flex-direction: column;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: -1
  }
}