@import "mixins/mixins";
@import "common/var";
@import "bio-scss/variables";

@include b(bio-imgViewer) {
  .el-image-viewer {
    &__close {
      .el-icon-close {
        color: #fff;
      }
    }

    &__wrappers {
      .is-disabled {
        color: $color3;

        &:hover {
          cursor: not-allowed;
        }
      }

      &.useThumbnail {
        .el-image-viewer__canvas {
          height: calc(100% - 122px);
          margin-bottom: 10px;
        }
      }
    }

    &__canvas {
      position: relative;

      #ocr-tag {
        position: fixed;
        z-index: 2020;
        border: 1px solid red;
        display: none;
      }
    }

    &__actions {
      width: 100%;
      left: 0;
      right: 0;
      transform: translateX(0);
      background: transparent;
      padding: 0;

      &.viewer__arrow__action {
        .el-image-viewer__actions__inner {
          width: auto;

          & > i {
            margin: 0 2px;
          }
        }

        i.el-image-viewer__actions__divider {
          margin: 0 5px;
        }
      }

      &__inner {
        width: 250px;
        background-color: #606266;
        padding: 0 23px;
        border-radius: 22px;
      }
    }
  }

  .bio-preview {
    width: 100%;
    padding: 0 15px;
    &-wrap {
      overflow-x: auto;
      width: 100%;
    }

    .pre-box {
      display: flex;
      flex-wrap: nowrap;
    }

    .pre-item {
      display: inline-flex;
      height: 90px;
      width: 90px;
      margin-right: 10px;
      overflow: hidden;
      align-items: center;
      justify-content: center;
    }
    .pre-img {
      max-width: 100%;
      height: auto;
      cursor: pointer;
    }
  }
}