@import '../../style/theme.less';

.pc-wrap {
    position: relative;
}

.pc-card {
    position: relative;
    background: @bg-white;
    border-radius: @radius-xl;
    box-shadow: @shadow;
    padding: 40rpx;
    border: @border;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.pc-card--with-fab {
    padding-bottom: 56rpx;
}

.pc-kicker {
    display: block;
    text-align: center;
    font-size: @fs-section-head-title;
    font-weight: bold;
    color: @text-secondary;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 30rpx;
}

.pc-canvas-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400rpx;
    background: @bg-gray;
    border-radius: @radius-sm;
    border: 2rpx dashed rgba(50, 46, 37, 0.12);
    overflow: hidden;
}

.pc-canvas {
    max-width: 100%;
    border-radius: @radius-sm;
    box-shadow: @shadow;
}

/* 底部角上的圆形操作按钮 */
@pc-fab-size: 88rpx;

@keyframes pc-fab-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.pc-fab {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: @pc-fab-size;
    height: @pc-fab-size;
    border-radius: 50%;
    box-shadow: 0 6rpx 18rpx rgba(50, 46, 37, 0.12);
    box-sizing: border-box;
}

.pc-fab--hover {
    opacity: 0.88;
    transform: scale(0.96);
}

.pc-fab--refresh {
    left: 12rpx;
    bottom: 12rpx;
    background: #9add4c;
}

.pc-fab--favorite {
    right: 12rpx;
    bottom: 12rpx;
    background: #f2eee4;
}

.pc-fab__toy {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pc-fab__icon-wrap--a .pc-fab__toy,
.pc-fab__icon-wrap--b .pc-fab__toy {
    animation: pc-fab-spin 0.55s linear 1;
}

.pc-fab__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}