/**
 * Button Block Styles
 * Uses theme design tokens from attributes.php
 * Only is-style-* classes for block editor
 * @package MarketersDelight
 * @since 6.4.0
 */

/* ============================================
   CORE BUTTON STYLES
   ============================================ */

/* Link style - text link appearance */
.is-style-link .wp-element-button {
    border: 0;
    background: transparent;
    color: var(--color-text);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: var(--text-underline-offset, 0.2em);
    padding: 0;
}

.is-style-link .wp-element-button:hover {
    color: var(--color-primary);
}

/* Primary - solid primary color */
.is-style-primary .wp-element-button {
    background: var(--color-primary);
    color: #fff;
    border: none;
    padding: var(--btn-space);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-m);
    box-shadow: var(--button-shadow);
    transition: all var(--transition);
}

.is-style-primary .wp-element-button:hover {
    background: color-mix(in srgb, var(--color-primary) 85%, #000);
    box-shadow: var(--shadow-md);
}

/* Secondary - subtle background */
.is-style-secondary .wp-element-button {
    background: var(--color-content-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    padding: calc(var(--space-half) - 1px) calc(var(--space-single) - 1px);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-m);
    transition: all var(--transition);
}

.is-style-secondary .wp-element-button:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

/* Outline - transparent with border */
.is-style-outline .wp-element-button {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    padding: calc(var(--space-half) - 2px) calc(var(--space-single) - 2px);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-m);
    transition: all var(--transition);
}

.is-style-outline .wp-element-button:hover {
    background: var(--color-primary);
    color: #fff;
}

/* ============================================
   COLOR VARIANTS
   ============================================ */

/* Blue - professional trust */
.is-style-blue .wp-element-button {
    background: #2563eb;
    color: #fff;
    border: none;
    padding: var(--btn-space);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-m);
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25);
    transition: all var(--transition);
}

.is-style-blue .wp-element-button:hover {
    background: #1d4ed8;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

/* Orange - energetic action */
.is-style-orange .wp-element-button {
    background: #ea580c;
    color: #fff;
    border: none;
    padding: var(--btn-space);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-m);
    box-shadow: 0 2px 4px rgba(234, 88, 12, 0.25);
    transition: all var(--transition);
}

.is-style-orange .wp-element-button:hover {
    background: #c2410c;
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.35);
}

/* Green - success, positive */
.is-style-green .wp-element-button {
    background: #16a34a;
    color: #fff;
    border: none;
    padding: var(--btn-space);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-m);
    box-shadow: 0 2px 4px rgba(22, 163, 74, 0.25);
    transition: all var(--transition);
}

.is-style-green .wp-element-button:hover {
    background: #15803d;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.35);
}

/* Purple - premium, creative */
.is-style-purple .wp-element-button {
    background: #7c3aed;
    color: #fff;
    border: none;
    padding: var(--btn-space);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-m);
    box-shadow: 0 2px 4px rgba(124, 58, 237, 0.25);
    transition: all var(--transition);
}

.is-style-purple .wp-element-button:hover {
    background: #6d28d9;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35);
}

/* Teal - fresh, modern */
.is-style-teal .wp-element-button {
    background: #0d9488;
    color: #fff;
    border: none;
    padding: var(--btn-space);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-m);
    box-shadow: 0 2px 4px rgba(13, 148, 136, 0.25);
    transition: all var(--transition);
}

.is-style-teal .wp-element-button:hover {
    background: #0f766e;
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.35);
}

/* Pink - playful, feminine */
.is-style-pink .wp-element-button {
    background: #db2777;
    color: #fff;
    border: none;
    padding: var(--btn-space);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-m);
    box-shadow: 0 2px 4px rgba(219, 39, 119, 0.25);
    transition: all var(--transition);
}

.is-style-pink .wp-element-button:hover {
    background: #be185d;
    box-shadow: 0 4px 12px rgba(219, 39, 119, 0.35);
}

/* Dark - bold contrast */
.is-style-dark .wp-element-button {
    background: #1e293b;
    color: #fff;
    border: none;
    padding: var(--btn-space);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-m);
    box-shadow: 0 2px 4px rgba(30, 41, 59, 0.3);
    transition: all var(--transition);
}

.is-style-dark .wp-element-button:hover {
    background: #0f172a;
    box-shadow: 0 4px 12px rgba(30, 41, 59, 0.4);
}

/* Slate - neutral professional */
.is-style-slate .wp-element-button {
    background: #475569;
    color: #fff;
    border: none;
    padding: var(--btn-space);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-m);
    box-shadow: 0 2px 4px rgba(71, 85, 105, 0.25);
    transition: all var(--transition);
}

.is-style-slate .wp-element-button:hover {
    background: #334155;
    box-shadow: 0 4px 12px rgba(71, 85, 105, 0.35);
}

/* ============================================
   PREMIUM BUTTON VARIATIONS
   ============================================ */

/* Glow - glows on hover */
.is-style-glow .wp-element-button {
    background: var(--color-primary);
    color: #fff;
    border: none;
    padding: var(--btn-space);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-m);
    transition: all var(--transition);
}

.is-style-glow .wp-element-button:hover {
    box-shadow: 0 0 20px rgba(192, 57, 43, 0.5),
                0 0 40px rgba(192, 57, 43, 0.25);
}

/* Pill - fully rounded */
.is-style-pill .wp-element-button {
    background: var(--color-secondary);
    color: #fff;
    border: none;
    padding: var(--btn-space);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-full);
    transition: all var(--transition);
}

.is-style-pill .wp-element-button:hover {
    background: color-mix(in srgb, var(--color-secondary) 85%, #000);
    box-shadow: var(--shadow-sm);
}

/* 3D - raised effect */
.is-style-3d .wp-element-button {
    background: var(--color-primary);
    color: #fff;
    border: none;
    padding: var(--btn-space);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-m);
    box-shadow: 0 4px 0 #922b21;
    transition: all 0.1s ease;
}

.is-style-3d .wp-element-button:hover {
    box-shadow: 0 3px 0 #922b21;
    transform: translateY(1px);
}

.is-style-3d .wp-element-button:active {
    box-shadow: 0 1px 0 #922b21;
    transform: translateY(3px);
}

/* Ghost - minimal with subtle border */
.is-style-ghost .wp-element-button {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    padding: calc(var(--space-half) - 1px) calc(var(--space-single) - 1px);
    font-weight: var(--font-weight);
    border-radius: var(--radius-m);
    transition: all var(--transition);
}

.is-style-ghost .wp-element-button:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}

/* Gradient Border - gradient outline effect */
.is-style-gradient-outline .wp-element-button {
    background: linear-gradient(var(--color-content-bg), var(--color-content-bg)) padding-box,
                linear-gradient(135deg, var(--color-primary), #ea580c) border-box;
    color: var(--color-text);
    border: 2px solid transparent;
    padding: calc(var(--space-half) - 2px) calc(var(--space-single) - 2px);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-m);
    transition: all var(--transition);
}

.is-style-gradient-outline .wp-element-button:hover {
    background: linear-gradient(135deg, var(--color-primary), #ea580c);
    color: #fff;
}

/* Shine - animated shine on hover */
.is-style-shine .wp-element-button {
    position: relative;
    background: var(--color-secondary);
    color: #fff;
    border: none;
    padding: var(--btn-space);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-m);
    overflow: hidden;
    transition: all var(--transition);
}

.is-style-shine .wp-element-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.4s ease;
}

.is-style-shine .wp-element-button:hover::before {
    left: 100%;
}

/* Arrow - with arrow indicator */
.is-style-arrow .wp-element-button {
    background: var(--color-primary);
    color: #fff;
    border: none;
    padding: var(--space-half) var(--space-single);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-m);
    display: inline-flex;
    align-items: center;
    gap: var(--space-third);
    transition: all var(--transition);
}

.is-style-arrow .wp-element-button::after {
    content: "→";
    transition: transform var(--transition);
}

.is-style-arrow .wp-element-button:hover {
    background: color-mix(in srgb, var(--color-primary) 85%, #000);
    gap: calc(var(--space-third) + 4px);
}