:global {

  .face-recognition-container {
    width: 100%;
    height: 220px;

    .face-recognition {
      width: 100%;
      height: 100%;
      border: 1px solid #d9d9d9;
      border-radius: 2px;
      .face-wrapper {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 2px;
        overflow: hidden;
        position: relative;
        background: #fff;

        .shape{
          position: absolute;
          top: 10px;
          left: 10px;
          width: ~'calc(100% - 20px)';
          height: ~'calc(100% - 30px - 20px)';
          z-index: 1;
          div{
            width: 20px;
            height: 20px;
            border: 1px solid #1890FF;
            position: absolute;
            &:nth-child(1) {
              top: 0;
              left: 0;
              border-right: none;
              border-bottom: none;
            }
            &:nth-child(2) {
              top: 0;
              right: 0;
              border-left: none;
              border-bottom: none;
            }
            &:nth-child(3) {
              bottom: 0;
              left: 0;
              border-right: none;
              border-top: none;
            }
            &:nth-child(4) {
              bottom: 0;
              right: 0;
              border-left: none;
              border-top: none;
            }
          }
        }
        .img-wrapper {
          width: 100%;
          height: 100%;
        }

        .canvas-wrapper {
          width: 100%;
          height: 100%;
          opacity: 0;
          visibility: hidden;
        }

        video {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center;
          position: relative;
          z-index: 8;
        }

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center;
        }

        .thumb-img {
          width: 268px;
          height: 214px;
          position: absolute;
          object-fit: cover;
          object-position: center;
          top: 2px;
          left: 2px;
          z-index: 5;
        }

        .tips {
          width: 100%;
          height: 30px;
          position: absolute;
          // background: rgba(255, 255, 255, 0.65);
          top: 0px;
          left: 0px;
          z-index: 10;
          box-sizing: border-box;
          // color: rgba(255, 255, 255, 0.85);
          color: #333;
          font-size: 12px;
          line-height: 30px;
          box-sizing: border-box;
          padding-left: 8px;
          text-align: center;

          span {
            margin-right: 8px;
          }
        }

        .action {
          width: 100%;
          height: 30px;
          position: absolute;
          background: rgba(255, 255, 255, 0.65);
          bottom: 0px;
          left: 0px;
          z-index: 10;
          box-sizing: border-box;
          transition: 0.3s ease;
          border-top: 1px solid #d9d9d9;
          &:hover {
            background: rgba(255, 255, 255, 0.95);
          }

          .action-item {
            width: 100%;
            height: 30px;
            float: right;
            text-align: center;
            line-height: 30px;
            font-size: 14px;
            color: #333;
            cursor: pointer;

            .action-item-icon {
              span {
                font-size: 13px;
                position: relative;
                top: 1px;
              }
            }

            span {
              margin-left: 4px;
              font-size: 12px;
            }
          }
        }
        .action_disabled{
          color: #fff;
          &:hover {
            background: #ccc;
          }
          opacity: 0.65;
          background: #ccc;
        }
      }

    }
  }

}