/*
 * Social States CSS
 * Semantic data attributes for social interaction states
 * Separates presentation from business logic in social.js
 */

/* ===== VISIBILITY CONTROL ===== */
/* Hide elements when data-visible="false" */
[data-visible="false"] {
    display: none;
}

/* ===== HEART ICON STATE ===== */
/* Toggle between outline and filled heart icons */
[data-heart-state="outline"] .heart-filled {
    display: none;
}

[data-heart-state="filled"] .heart-outline {
    display: none;
}

/* ===== BOOKMARK ICON STATE ===== */
[data-bookmark-state="outline"] .bookmark-filled {
    display: none;
}

[data-bookmark-state="filled"] .bookmark-outline {
    display: none;
}

/* ===== LIKE STATE ===== */
/* Like count turns red when user has liked */
[data-liked="true"] {
    color: var(--red-500) !important; /* Terracotta Clay */
}

/* Bookmark icon/count darken when active */
[data-bookmarked="true"] {
    color: rgb(31 41 55) !important; /* gray-800 */
}

/* Make like count clickable when there are likers to show */
[data-interactive="true"] {
    cursor: pointer;
}

/* ===== VOTE BUTTON STATES ===== */
/* Upvote button - blue when upvoted */
button[data-current-vote="1"] svg {
    color: var(--blue-500) !important; /* Deep Maritime */
}

/* Downvote button - red when downvoted */
button[data-current-vote="-1"] svg {
    color: var(--red-500) !important; /* Terracotta Clay */
}

/* ===== VOTE COUNT STATE ===== */
/* Vote count color reflects user's vote type */
[data-vote-type="upvote"] {
    color: var(--blue-500) !important; /* Deep Maritime */
}

[data-vote-type="downvote"] {
    color: var(--red-500) !important; /* Terracotta Clay */
}

[data-vote-type="none"] {
    color: rgb(107 114 128) !important; /* gray-500 */
}

/* ===== COMMENT PARTICIPATION STATES ===== */
/* Comment button - blue when user has commented */
button[data-commented="true"] svg {
    color: var(--blue-500) !important; /* Deep Maritime */
}

/* Comment count - blue when user has commented */
[data-comment-count][data-commented="true"] {
    color: var(--blue-500) !important; /* Deep Maritime */
}

[data-comment-count][data-commented="false"] {
    color: rgb(75 85 99) !important; /* gray-600 */
}

/* ===== DISCUSSION PARTICIPATION STATES ===== */
/* Discussion stat icon - blue when user has participated */
[data-social-role="discussion-stat"][data-participated="true"] svg {
    color: var(--blue-500) !important; /* Deep Maritime */
}

/* Discussion count - blue when user has participated */
[data-social-role="discussion-stat"][data-participated="true"] [data-discussion-count] {
    color: var(--blue-500) !important; /* Deep Maritime */
}

[data-social-role="discussion-stat"][data-participated="false"] [data-discussion-count] {
    color: rgb(107 114 128) !important; /* gray-500 */
}

/* ===== BASE COLOR VARIANTS ===== */
/* Support for custom base colors from templates */
/* Like counts can specify a base color via data-base-color attribute */
[data-liked="false"][data-base-color="gray-400"] {
    color: rgb(156 163 175) !important; /* gray-400 */
}

[data-liked="false"][data-base-color="gray-500"] {
    color: rgb(107 114 128) !important; /* gray-500 */
}

[data-liked="false"][data-base-color="gray-600"] {
    color: rgb(75 85 99) !important; /* gray-600 */
}