@import '../mixins/progress.less';
@import '../custom.less';

@qr-code-prefix-cls: ~'@{css-prefix}qr-code';

.@{qr-code-prefix-cls} {
  &-container {
    position: relative;
    padding: 12px;
    &.border {
      border: 1px solid rgb(5 5 5 / 6%);
      border-radius: 8px;
    }

    .qrcode-border {
      padding: 2px;
      border: 1px solid rgb(5 5 5 / 6%);
      border-radius: 8px;
    }

    .qrcode-expried {
      font-size: 14px;
    }

    .mask {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      text-align: center;
      color: rgb(0 0 0 / 88%);
      inset-block-start: 0;
      inset-inline-start: 0;
      flex-direction: column;

      &-icon {
        z-index: 10;
      }

      &-status {
        z-index: 20;
        background: rgb(255 255 255 / 96%);
      }

      .icon {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        background: white;
      }
    }
  }
}
