/**
 * Deal Votes Styles
 *
 * Styles für Upvote/Downvote-Buttons
 *
 * @since 1.0.0
 */

/* ========================================
   Vote Buttons Container
   ======================================== */

.dm-vote-buttons {
    display: flex !important;
    align-items: center;
    gap: var(--dm-spacing-s) !important;
    padding: var(--dm-spacing-s) !important;
    background: var(--dm-color-bg-alt);
    border-radius: var(--dm-radius-xl);
}

/* ========================================
   Vote Button
   ======================================== */

.dm-vote-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--dm-spacing-s);
    border-radius: var(--dm-radius-xl);
    background: var(--dm-color-bg);
    padding: var(--dm-spacing-m) var(--dm-spacing-l);
    color: var(--dm-color-faded);
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.dm-vote-btn:hover:not(:disabled) {
    color: var(--dm-alt-color-heading);
    background: var(--dm-color-faded);
}

.dm-vote-btn:active:not(:disabled) {
    color: var(--dm-alt-color-heading);
    background: var(--dm-color-faded);
}

.dm-vote-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.dm-vote-btn.dm-upvote.active,
.dm-vote-btn.dm-downvote.active {
    color: var(--dm-alt-color-heading);
    background: var(--dm-color-faded);
}

/* Loading State */
.dm-vote-btn.loading {
    pointer-events: none;
    opacity: 0.7;
}

.dm-vote-btn.loading .dm-vote-icon i {
    animation: dm-vote-spin 0.8s linear infinite;
}

@keyframes dm-vote-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ========================================
   Vote Icon
   ======================================== */

.dm-vote-icon {
    font-size: var(--dm-font-size-xs);
    line-height: var(--dm-line-height-tight);
}

/* ========================================
   Vote Count
   ======================================== */

.dm-vote-count {
    font-size: var(--dm-font-size-s);
    line-height: var(--dm-line-height-tight);
}

/* ========================================
   Login Hint
   ======================================== */

.dm-vote-login-hint {
    padding: var(--dm-spacing-s) var(--dm-spacing-l);
    font-size: var(--dm-font-size-s);
    color: var(--dm-color-faded);
    background: var(--dm-color-bg-alt);
    border-radius: var(--dm-radius-m);
}

/* ========================================
   Vote Pulse Animation
   ======================================== */

@keyframes dm-vote-pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.dm-vote-pulse {
    animation: dm-vote-pulse 0.6s ease;
}

/* ========================================
   Loading State
   ======================================== */

.dm-vote-btn.dm-vote-loading {
    position: relative;
    color: transparent !important;
}

.dm-vote-btn.dm-vote-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid #f3f4f6;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: dm-vote-spin 0.6s linear infinite;
}

@keyframes dm-vote-spin {
    to {
        transform: rotate(360deg);
    }
}