@import (reference) '../../styles/variables.less';

.@{prefix}-previewer {
  &-action-qrcode {
    position: relative;

    > canvas {
      position: absolute;
      z-index: 99999;
      bottom: 120%;
      left: 50%;
      border: 4px solid #fff;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 10%);
      box-sizing: content-box;
      transition: all 0.2s ease-in-out;
      transform: translateX(-50%) scale(0);
      transform-origin: center bottom;
    }

    &:hover > canvas,
    &:focus > canvas {
      transform: translateX(-50%) scale(1);
    }
  }
}