@import "../../../themes/default";

:global {
  .app-qrcode {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 276px;
    text-align: center;
    overflow: hidden;
    cursor: pointer;
  }

  .app-qrcode > div {
    vertical-align: bottom;
    overflow: hidden;
  }

  .app-qrcode > div img {
    width: 276px;
  }

  .app-qrcode canvas {
    display: block;
    border: 4px solid @color-white;
  }

  .app-qrcode p {
    margin-top: 10px;
    margin-bottom: 0;
  }

  .app-qrcode-heading {
    text-align: center;
    margin: 36px 0 2px;
    color: @color-black-65;
  }

  .app-qrcode .app-qrcode-code {
    width: 180px;
    margin-top: 10px;
    font-size: 13px;
  }

  .app-qrcode-show {
    width: 276px;
    transition: width .3s cubic-bezier(0.4, 0.0, 1, 1);
  }

  .app-qrcode-hide {
    width: 180px;
    transition: width .3s cubic-bezier(0.4, 0.0, 1, 1);
  }

  .app-qrcode-show .app-qrcode-tips {
    height: 365px;
    transition: height .3s cubic-bezier(0.4, 0.0, 1, 1);
  }

  .app-qrcode-hide .app-qrcode-tips {
    height: 0;
    transition: height .3s cubic-bezier(0.4, 0.0, 1, 1);
    overflow: hidden;
  }

  .app-qrcode-instant {
    position: relative;
    right: 0;
    bottom: 0;
    overflow: inherit;
  }

  .app-qrcode-instant > div {
    overflow: inherit;
  }

  .app-qrcode-instant,
  .app-qrcode-instant .app-qrcode-code {
    width: 100%;
  }

  .app-qrcode-instant .app-qrcode-code {
    margin-top: 0;
  }

  .app-qrcode-instant canvas {
    margin: 0 auto;
  }

  .app-qrcode-instant .app-qrcode-tips {
    position: absolute;
    right: -312px;
    bottom: -75px;
    height: auto;
    transition: opacity .3s cubic-bezier(0.4, 0.0, 1, 1);
  }

  .app-qrcode-instant.app-qrcode-show .app-qrcode-tips {
    opacity: 1;
  }

  .app-qrcode-instant.app-qrcode-hide .app-qrcode-tips {
    opacity: 0;
  }
}