@import '../index.less';
@btri-image: ~'@{ant-prefix}-btri-image';
@group-preview: ~'@{btri-image}-group-preview';
@group-image: ~'@{btri-image}-group';

.@{btri-image} {
  &-preview {
    height: 100%;
    .@{ant-prefix}-modal-content {
      background-color: transparent;
      height: 100%;
    }
  }
  &-preview-container {
    display: flex;
    justify-content: center;
    background-color: transparent;
    height: 100%;
    position: relative;
    .@{ant-prefix}-image {
      cursor: move;
    }
    .@{btri-image}-handle {
      position: absolute;
      font-size: 20px;
      color: var(--white);
      bottom: 40px;
      padding: 14px 22px;
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 4px;
      display: flex;
      gap: 12px;
      .@{ant-prefix}-btri-icon-box {
        cursor: pointer;
      }
    }
  }
  &-box {
    &.@{ant-prefix}-image-img {
      border-radius: 4px;
    }
  }
  &-root {
    width: 100%;
    height: 100%;
    display: flex !important;
    justify-content: center;
    align-items: center;
    .@{ant-prefix}-image-mask {
      border-radius: 4px;
      .@{btri-image}-mask-content {
        display: flex;
        gap: 8px;
        align-items: center;
        width: 100%;
        height: 100%;
        justify-content: center;
        .@{ant-prefix}-btri-icon-box {
          font-size: 20px;
        }
      }
    }
  }
  &-loading {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-1);
    font-size: 40px;
    color: var(--primary-6);
  }
}

.@{group-preview} {
  &.@{ant-prefix}-modal {
    height: 100%;
    .@{ant-prefix}-modal-content {
      background-color: transparent;
      height: 100%;
      .@{group-preview}-container {
        display: flex;
        justify-content: center;
        height: 100%;
        background-color: transparent;
        .@{ant-prefix}-btri-image-root {
          width: 100%;
          height: 100%;
        }
        .@{ant-prefix}-image {
          cursor: move;
        }
        .@{btri-image}-group-handle {
          position: absolute;
          font-size: 20px;
          color: var(--white);
          bottom: 40px;
          padding: 14px 22px;
          background-color: rgba(0, 0, 0, 0.5);
          border-radius: 4px;
          display: flex;
          gap: 12px;
          .@{ant-prefix}-btri-icon-box {
            cursor: pointer;
          }
        }
        .@{group-image}-icon {
          position: absolute;
          font-size: 24px;
          top: calc(50% - 24px);
          color: var(--white);
          cursor: pointer;
          height: 48px;
          width: 48px;
          border-radius: 50%;
          background-color: rgba(0, 0, 0, 0.5);
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .@{group-image}-left {
          left: 0;
        }
        .@{group-image}-right {
          right: 0;
        }
      }
    }
  }
}