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

.preview-footer-actions {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 0 24rpx;
    // padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: border-box;
    z-index: 60;

    &__bar {
        max-width: 686rpx;
        margin: 0 auto;
        background: @bg-white;
        border-radius: 48rpx;
        padding: 20rpx;
        box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.12);
        border: 1rpx solid #f0e7d6;
        display: flex;
        gap: 16rpx;
    }

    /* flex 子项：占宽比例；min-width:0 避免子项溢出时把 flex 算崩 */
    &__secondary {
        flex: 3.92;
        min-width: 0;
    }

    &__primary {
        flex: 6.18;
        min-width: 0;
    }

    /*
     * 以下类通过 toy-button 的 custom-class 作用在内部原生 button 上。
     * 不能写 &__primary .toy-btn：小程序样式无法穿透进子自定义组件。
     */
    .preview-footer-actions__toy-btn {
        border-radius: 28rpx;
        font-size: 30rpx;
    }

    .preview-footer-actions__toy-btn--primary {
        box-shadow: 0 4rpx 12rpx rgba(255, 215, 0, 0.3);
    }
}