/* 
 * GridMode Vote Button Styles
 * Aligned with "Project Nova" design system from the design spec.
 */

/* 1. CSS Variables for Theming */
:root {
    --vote-icon-default: #A0A0A0;
    --vote-icon-hover: #C0C0C0;
    --vote-text-dark: #FFFFFF;
    --vote-text-light: #333333;
    --vote-bg-hover: rgba(255, 255, 255, 0.1);
    --vote-border-default: #505050;
    
    --like-active-icon: #28A745;
    --like-active-bg: rgba(40, 167, 69, 0.2);
    
    --dislike-active-icon: #DC3545;
    --dislike-active-bg: rgba(220, 53, 69, 0.2);

    --disabled-color: #707070;
    --disabled-opacity: 0.6;

    --approval-high: #28A745;
    --approval-medium: #FFC107;
    --approval-low: #DC3545;
    --approval-new: #A0A0A0;

    --transition-speed: 0.15s ease-in-out;
}

/* Assuming a dark mode body class for simplicity */
body.dark-mode .gridmode-vote__button {
    color: var(--vote-text-dark);
}

body:not(.dark-mode) .gridmode-vote__button {
    color: var(--vote-text-light);
}

/* 2. Vote Button General Styles */
.gridmode-vote {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 20px 0;
}

.gridmode-vote__button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--vote-border-default);
    border-radius: 20px; /* Rounded shape */
    background-color: transparent;
    cursor: pointer;
    transition: background-color var(--transition-speed), color var(--transition-speed), transform var(--transition-speed), border-color var(--transition-speed);
    font-size: 14px;
    line-height: 1;
    color: var(--vote-icon-default); /* Default icon and text color */
}

.gridmode-vote__icon {
    font-size: 1.2em;
}

.gridmode-vote__count {
    font-weight: 600;
}

/* 3. Button States */

/* Hover State */
.gridmode-vote__button:not(:disabled):hover {
    background-color: var(--vote-bg-hover);
    color: var(--vote-icon-hover);
    transform: scale(1.05);
}

/* Active State - Like */
.gridmode-vote__button--like.is_active {
    background-color: var(--like-active-bg);
    color: var(--like-active-icon);
    border-color: var(--like-active-icon);
}

/* Active State - Dislike */
.gridmode-vote__button--dislike.is_active {
    background-color: var(--dislike-active-bg);
    color: var(--dislike-active-icon);
    border-color: var(--dislike-active-icon);
}

/* Pulse animation on click */
.gridmode-vote__button:active {
    transform: scale(1.1);
}

/* Disabled State */
.gridmode-vote__button:disabled {
    color: var(--disabled-color);
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
    border-color: var(--disabled-color);
}

.gridmode-vote__button:disabled:hover {
    background-color: transparent;
    transform: none;
}

/* 4. Approval Rate Styles */
.gridmode-approval-rate-wrapper {
    margin: 20px 0;
    font-size: 1.1em;
    font-weight: bold;
}

.gridmode-approval-rate {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: help;
    transition: color var(--transition-speed), background-color var(--transition-speed);
}

.gridmode-approval-rate--green .gridmode-approval-rate__percentage {
    color: var(--approval-high);
}

.gridmode-approval-rate--orange .gridmode-approval-rate__percentage {
    color: var(--approval-medium);
}

.gridmode-approval-rate--red .gridmode-approval-rate__percentage {
    color: var(--approval-low);
}

.gridmode-approval-rate--new .gridmode-approval-rate__text {
    color: var(--approval-new);
}

/* 5. Tooltip Styles (Basic) */
/* For more advanced tooltips, a library might be better, but this covers the spec. */
.gridmode-vote[title],
.gridmode-approval-rate[title] {
    position: relative;
}

/* Note: Custom tooltip styling is complex and often requires JS. 
   The default browser tooltip will be used based on the `title` attribute, 
   which is consistent with the PHP implementation. */