.vuiImage__imageWrapper {
  position: relative;
  display: inline-block;
  line-height: 0;
  width: 100%;
}

.vuiImage__imageWrapper--clickable {
  padding: $sizeXs;
  border: 1px solid var(--vui-color-border-light);
  border-radius: $sizeXxs;
  box-shadow: $shadowSmallStart;
  transition: box-shadow $transitionSpeed;

  &:hover {
    box-shadow: $shadowSmallEnd;
  }
}

.vuiImage__image {
  display: block;
  width: 100%;
  height: auto;
}

.vuiImage__placeholder {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--vui-color-light-shade);
  border-radius: $sizeXxs;

  &--error {
    background-color: var(--vui-color-danger-lighter-shade);

    p {
      color: var(--vui-color-danger-shade);
    }
  }
}

.vuiImage__iconWrapper {
  max-width: 64px;

  svg {
    width: 100%;
    height: 100%;
  }
}

.vuiImage__caption {
  margin-top: $sizeXs;
}

.vuiImagePreview__container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: $screenBlockZIndex;
}

.vuiImagePreview__mask {
  height: 100%;
  background-color: rgba(var(--vui-color-full-shade-rgb), 0.6);
}

.vuiImagePreview__header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: $sizeL * 2;
  padding: $sizeS $sizeM;
  background-color: var(--vui-color-full-shade);
}

.vuiImagePreview__closeButton {
  pointer-events: all;
}

.vuiImagePreview__imageContainer {
  position: absolute;
  top: $sizeL * 2;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  height: calc(100vh - #{$sizeL * 2});
}

.vuiImagePreview__image {
  max-width: calc(100vw - #{$sizeXl * 2});
  max-height: calc(100vh - #{$sizeL * 4});
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
  pointer-events: all;
}