// @import '../../styles-new/default.less';
@import '../../theme/components/image.less';

@class-prefix-image: ~'adm-image';

.@{class-prefix-image} {
  --width: var(--adm-image-width, auto);
  --height: var(--adm-image-height, auto);
  width: var(--width);
  height: var(--height);
  display: block;
  overflow: hidden;

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

  &-tip {
    position: relative;
    background-color: var(--adm-color-box);
    height: 100%;
    min-height: 24*@hd;
    min-width: 24*@hd;

    >svg {
      width: 24*@hd;
      height: 24*@hd;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      color: var(--adm-color-weak);
    }
  }
}

.image-view-wrap {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  background-color: @image-background-fill-color;
  overflow: auto;
  touch-action: none; // 禁用所有浏览器默认触摸行为（包括双指缩放、滚动等）
  // display: flex;
  // align-items: center;

  transform: translateZ(0);

  .image-view {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;


    // height: 100vh;
    img {
      width: 100%;
      height: auto;
      max-width: 100%;
      max-height: 100%;
    }



  }




}

.image-view-ribbon {
  // width: 100px;
  // height: 86px;
  position: fixed;
  bottom: 15px;
  right: 0;
  z-index: 1001;
  display: flex;
  align-items: center;

  .text-button {
    background-color: @image-button-fill-color;
    padding: 0 @image-button-text-padding-horizontal ;
    width: @image-button-text-width;
    height: @image-button-text-height;
    color: @image-button-text-color;
    font-size: @image-button-text-font-size;
    font-weight: @image-button-text-font-weight;
    border-radius: @image-button-icon-border-radius;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    box-sizing: border-box;

    span {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

  }

  .img-button {
    border-radius: @image-button-icon-border-radius;
    background-color: @image-button-fill-color;
    width: @image-button-icon-width;
    height: @image-button-icon-height;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;

    img {
      width: @image-button-icon-size;
      height: @image-button-icon-size;
    }
  }
}