.playful-btn {
display: inline-flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 999px;
font-weight: 700;
transition: opacity .2s ease, box-shadow .15s ease;
line-height: 1.4;
}
.playful-btn--block {
display: flex;
width: 100%;
}
/* ---- Primary ---- */
.playful-btn--primary {
background: var(--color-primary, $brand-primary);
color: $app-surface;
box-shadow: 0 2px 8px rgba(249,115,22,0.3);
}
/* ---- Secondary ---- */
.playful-btn--secondary {
background: var(--surface, $app-surface);
color: var(--text, $uni-text-color);
border: 2rpx solid var(--border, $uni-border-color);
box-shadow: 0 2px 6px rgba(249,115,22,0.08);
}
/* ---- Success ---- */
.playful-btn--success {
background: var(--color-success, $status-success-2);
color: $app-surface;
box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}
/* ---- Warning ---- */
.playful-btn--warning {
background: var(--color-warning, $dim-wealth);
color: $app-surface;
box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}
/* ---- Error ---- */
.playful-btn--error {
background: var(--color-error, $status-danger);
color: $app-surface;
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}
/* ---- Clay (孩子端玩具风) ---- */
.playful-btn--clay {
background: var(--color-primary, $brand-primary);
color: $app-surface;
border: 2rpx solid var(--border, $uni-border-color);
box-shadow: 0 2px 8px rgba(249,115,22,0.15);
}
/* ---- Outline ---- */
.playful-btn--outline {
background: transparent;
color: var(--color-primary, $brand-primary);
border: 2rpx solid var(--color-primary, $brand-primary);
}
/* ---- Sizes ---- */
.playful-btn--xs { font-size: 22rpx; padding: 8rpx 20rpx; }
.playful-btn--sm { font-size: 24rpx; padding: 12rpx 28rpx; }
.playful-btn--md { font-size: 28rpx; padding: 16rpx 36rpx; }
.playful-btn--lg { font-size: 32rpx; padding: 20rpx 48rpx; min-height: 88rpx; }
/* ---- States ---- */
.playful-btn:active:not(:disabled) {
opacity: 0.85;
}
.playful-btn--clay:active:not(:disabled) {
opacity: 0.85;
}
.playful-btn--disabled,
.playful-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.playful-btn:focus {
outline: 2px solid rgba(249,115,22,0.4);
outline-offset: 2px;
}