@import '../../styles/index.less';

@loupe-prefix-cls: ~'@{open-prefix}-loupe';

.@{loupe-prefix-cls} {
  position: relative;

  &-img-container {
    cursor: move;
    position: relative;
    width: inherit;
    height: inherit;

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

    .@{loupe-prefix-cls}-img-mask {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 100;
      width: 100%;
      height: 100%;
    }

    .@{loupe-prefix-cls}-mouse-mask {
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.2);
    }
  }

  &-scale {
    position: absolute;
    top: 0;
    z-index: 200;
    overflow: hidden;

    img {
      position: absolute;
      top: 0;
      left: 0;
      transform-origin: top left;
    }
  }
}