.wrap {
  overflow: hidden;
  position: relative;
  min-width: 0;
  transition: height 0.25s;
  border-radius: $radius;
  margin-right: -10px;
  margin-left: -10px;

  .is_loading {
    .placeholder {
      opacity: 1;
    }
  }
}

.image_container {
  border-radius: $panel_radius 0 0 $panel_radius;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
  user-select: none;
  will-change: transform, height;
  transition: height 500ms, transform 500ms;
  padding: 0 0 20px 0;

  &:active {
    transition: none;
  }

  .image {
    max-width: 100%;
    opacity: 1;
    border-radius: $radius;
    box-shadow: transparentize($color: white, $amount: 0.95) 0 -1px,
      transparentize($color: #000000, $amount: 0.6) 0 2px 5px;
  }

  &.is_dragging {
    transition: none;
  }
}

.image_wrap {
  width: 100%;
  pointer-events: none;
  touch-action: none;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;

  &:global(.is_active) {
    opacity: 1;
  }
}

.placeholder {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: $content_bg;
  z-index: 0;
  pointer-events: none;
  touch-action: none;
  transition: opacity 2s;
  z-index: 2;
  opacity: 0;

  &.is_loading {
    opacity: 1;
  }

  svg {
    opacity: 0.025;
    fill: white;
  }
}