@import '../../base.less';

@import './_var.less';

@import './_mixin.less';

.@{prefix}-qrcode {
  position: relative;
  display: flex;
  box-sizing: border-box;
  background-color: @bg-color-container;
  padding: @qrcode-padding;
  border-radius: @qrcode-border-radius;
  border: 1px solid @component-border;

  > canvas {
    align-self: stretch;
    min-width: 0;
    flex: auto;
  }

  &.@{prefix}-borderless {
    border-color: transparent;
  }

  .@{prefix}-mask {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: @qrcode-z-index;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: @text-color-primary;
    background-color: @mask-bg;
    text-align: center;
    border-radius: @qrcode-border-radius;
    font: @qrcode-mask-inner-font;
  }

  .@{prefix}-expired {
    &__text {
      color: @text-color-primary;
      font-weight: 600;
    }

    &__button {
      display: flex;
      color: @brand-color;
      box-shadow: none;
      cursor: pointer;
      column-gap: @qrcode-mask-inner-gap;
      align-items: center;
      height: @qrcode-mask-inner-btn-height;
      transition: all @qrcode-expired-link-motion-duration-mid @qrcode-expired-link-motion-ease-in-out;

      &:hover {
        color: @qrcode-expired-link-color-active;
      }
    }
  }

  .@{prefix}-scanned {
    display: flex;
    column-gap: @qrcode-mask-inner-gap;
    align-items: center;

    &__icon {
      color: @qrcode-scanned-icon-color;
    }
  }
}

.@{prefix}-qrcode-svg {
  align-items: center;
  justify-content: center;
}