/**
 * Clap Button Styles
 */

/* Container styles */
.clap-button-container {
    display: flex;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    user-select: none;
}

/* Button styles */
.clap-button {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    background-color: transparent !important;
    cursor: pointer;
    margin-right: 10px;
    transition: all 0.25s ease;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    box-shadow: none !important;
    transform: none !important; /* Prevent any rotation */
}

.clap-button.active svg,
.clap-button.active img {
    transform: scale(1.2) rotate(0deg) !important;
}

.clap-button.active {
    background-color: transparent !important;
    border: none;
    transform: none !important;
}

/* Disabled state */
.clap-button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    border: none;
}

/* Count display */
.clap-count {
    font-size: 14px;
    font-weight: 500;
    color: #666;
    min-width: 24px;
}

/* Icon styles */
.clap-icon {
    width: 24px;
    height: 24px;
    transition: transform 0.25s ease;
    border: none;
    outline: none;
    transform: none !important; /* Prevent any rotation */
    display: block !important; /* Ensure proper rendering */
}

/* Animation styles */
@keyframes pulse {
    0% {
        transform: scale(1) rotate(0deg);
    }
    70% {
        transform: scale(1.05) rotate(0deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

.clap-button:active {
    transform: scale(0.95) rotate(0deg) !important; /* Scale but prevent rotation */
    background-color: transparent !important;
    border: none;
    box-shadow: none !important;
    outline: none;
}

/* Dot animation colors and styles */
.clap-dot {
    position: absolute;
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    pointer-events: none;
    animation: dot-float 1.2s ease-out forwards;
    z-index: 1200; /* Set z-index for particles to be below the icon but above the button */
}

.clap-dot.square {
    border-radius: 2px;
}

.clap-dot.triangle {
    border-radius: 0;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid currentColor;
    background-color: transparent !important;
}

/* Different colors for dots */
.clap-dot.color-1 { background-color: #00c864; }
.clap-dot.color-2 { background-color: #4caf50; }
.clap-dot.color-3 { background-color: #8bc34a; }
.clap-dot.color-4 { background-color: #cddc39; }
.clap-dot.color-5 { background-color: #ffc107; }
.clap-dot.color-6 { background-color: #ff9800; }
.clap-dot.color-7 { background-color: #ff5722; }
.clap-dot.color-8 { background-color: #f44336; }

/* Triangle colors need special handling */
.clap-dot.triangle.color-1 { border-bottom-color: #00c864; }
.clap-dot.triangle.color-2 { border-bottom-color: #4caf50; }
.clap-dot.triangle.color-3 { border-bottom-color: #8bc34a; }
.clap-dot.triangle.color-4 { border-bottom-color: #cddc39; }
.clap-dot.triangle.color-5 { border-bottom-color: #ffc107; }
.clap-dot.triangle.color-6 { border-bottom-color: #ff9800; }
.clap-dot.triangle.color-7 { border-bottom-color: #ff5722; }
.clap-dot.triangle.color-8 { border-bottom-color: #f44336; }

@keyframes dot-float {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.5) rotate(0deg);
    }
}