/**
 * TW Button Widget Styles
 */

/* Base button styles */
.tw-btn-wrapper {
    display: block;
}

.tw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    border: none;
    border-radius: 8px;
    background-color: #6366f1;
    color: #ffffff;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.tw-btn:hover {
    opacity: 0.9;
}

.tw-btn:focus {
    outline: none;
}

/* Icon styles */
.tw-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.tw-btn-icon svg {
    width: 1em;
    height: 1em;
}

/* ==========================================
   Hover Animations
   ========================================== */

/* Grow */
.tw-btn-hover-grow:hover {
    transform: scale(1.05);
}

/* Shrink */
.tw-btn-hover-shrink:hover {
    transform: scale(0.95);
}

/* Pulse */
@keyframes tw-btn-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
.tw-btn-hover-pulse:hover {
    animation: tw-btn-pulse 0.6s ease;
}

/* Float */
.tw-btn-hover-float:hover {
    transform: translateY(-6px);
}

/* Sink */
.tw-btn-hover-sink:hover {
    transform: translateY(6px);
}

/* Bob */
@keyframes tw-btn-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.tw-btn-hover-bob:hover {
    animation: tw-btn-bob 0.6s ease infinite;
}

/* Bounce */
@keyframes tw-btn-bounce {
    0%, 20%, 53%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}
.tw-btn-hover-bounce:hover {
    animation: tw-btn-bounce 0.8s ease;
}

/* Shake */
@keyframes tw-btn-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}
.tw-btn-hover-shake:hover {
    animation: tw-btn-shake 0.5s ease;
}

/* Wobble */
@keyframes tw-btn-wobble {
    0% { transform: translateX(0%); }
    15% { transform: translateX(-10px) rotate(-3deg); }
    30% { transform: translateX(8px) rotate(2deg); }
    45% { transform: translateX(-6px) rotate(-1deg); }
    60% { transform: translateX(4px) rotate(1deg); }
    75% { transform: translateX(-2px) rotate(-1deg); }
    100% { transform: translateX(0%); }
}
.tw-btn-hover-wobble:hover {
    animation: tw-btn-wobble 0.8s ease;
}

/* Buzz */
@keyframes tw-btn-buzz {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
    20%, 40%, 60%, 80% { transform: translateX(2px); }
}
.tw-btn-hover-buzz:hover {
    animation: tw-btn-buzz 0.15s linear infinite;
}

/* Slide animations */
.tw-btn-hover-slide-up:hover {
    transform: translateY(-4px);
}

.tw-btn-hover-slide-down:hover {
    transform: translateY(4px);
}

.tw-btn-hover-slide-left:hover {
    transform: translateX(-4px);
}

.tw-btn-hover-slide-right:hover {
    transform: translateX(4px);
}

/* ==========================================
   Icon Hover Animations
   ========================================== */

/* Move right */
.tw-btn-icon-anim-move-right:hover .tw-btn-icon {
    transform: translateX(4px);
}

/* Move left */
.tw-btn-icon-anim-move-left:hover .tw-btn-icon {
    transform: translateX(-4px);
}

/* Rotate */
.tw-btn-icon-anim-rotate:hover .tw-btn-icon {
    transform: rotate(360deg);
}

/* Scale */
.tw-btn-icon-anim-scale:hover .tw-btn-icon {
    transform: scale(1.3);
}

/* Bounce */
@keyframes tw-btn-icon-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
.tw-btn-icon-anim-bounce:hover .tw-btn-icon {
    animation: tw-btn-icon-bounce 0.4s ease infinite;
}

/* ==========================================
   Glow Effect
   ========================================== */

.tw-btn-glow {
    --tw-btn-glow-rgb: 99, 102, 241;
    --tw-btn-glow-intensity: 20px;
    --tw-btn-glow-spread: 40px;
}

/* Glow always */
@keyframes tw-btn-glow-pulse {
    0%, 100% {
        box-shadow:
            0 0 var(--tw-btn-glow-intensity) rgba(var(--tw-btn-glow-rgb), 0.4),
            0 0 var(--tw-btn-glow-spread) rgba(var(--tw-btn-glow-rgb), 0.2);
    }
    50% {
        box-shadow:
            0 0 calc(var(--tw-btn-glow-intensity) * 1.5) rgba(var(--tw-btn-glow-rgb), 0.6),
            0 0 calc(var(--tw-btn-glow-spread) * 1.5) rgba(var(--tw-btn-glow-rgb), 0.3);
    }
}

.tw-btn-glow.tw-btn-glow-always {
    animation: tw-btn-glow-pulse 2s ease-in-out infinite;
}

/* Glow on hover */
.tw-btn-glow.tw-btn-glow-hover:hover {
    box-shadow:
        0 0 var(--tw-btn-glow-intensity) rgba(var(--tw-btn-glow-rgb), 0.5),
        0 0 var(--tw-btn-glow-spread) rgba(var(--tw-btn-glow-rgb), 0.3),
        0 0 calc(var(--tw-btn-glow-spread) * 1.5) rgba(var(--tw-btn-glow-rgb), 0.15);
}