.shake {
  .shake-component {
    width: 100%;
    margin: 0 auto;
    min-height: 200px;
    display: block;
    position: relative;

    &:before {
      content: '';
      position: absolute;
      padding: 43%;
      transform: translate(-50%, -50%);
      left: 50%;
      top: 50%;
      background: url('https://img.maimairen.com/low-code/components/shake/shake-bg.png')
        center/cover;
      border-radius: 50%;
    }

    .shake-img-warp {
      position: relative;

      &.shake-ing {
        animation: shakeing1 0.2s infinite;
      }
    }

    .shake-icon {
      position: relative;
      width: 100%;

      &.shake-ing {
        animation: shakeing2 0.2s infinite;
      }
    }
  }

  @keyframes shakeing1 {
    0% {
      left: 10px;
    }

    50% {
      left: -10px;
    }

    100% {
      left: 10px;
    }
  }

  @keyframes shakeing2 {
    0% {
      top: 6px;
    }

    50% {
      top: -6px;
    }

    100% {
      top: 6px;
    }
  }

  .shake-button {
    display: block;
    width: 9em;
    color: #9d5f28;
    margin: 0 auto;
    transform: translateY(-50%);
    font-size: 18px;
    line-height: 44px;
    text-align: center;
    background: linear-gradient(180deg, #ffdc7b 0%, #fec75c 100%);
    border-radius: 24px;
    border: 2px solid #c3752d;

    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
}
