/**
 * Save Button Dynamic Labels
 * Shows "Save" or "Saved" labels using CSS pseudo-elements based on button state
 */

/* Hide the original span text in save buttons */
.ps-post__action--save span {
    display: none !important;
}

/* Base pseudo-element styling for save button labels */
.ps-post__action--save::after {
    content: "Save";
    font-size: 14px;
    color: #666;
    margin-left: 0;
    transition: color 0.2s ease;
}

/* When button is in saved state (has data-saved="1" attribute) */
.ps-post__action--save[data-saved="1"]::after {
    content: "Saved";
    color: #666; /* Same color as other action labels */
}

/* Hover states */
.ps-post__action--save:hover::after {
    color: #333;
}

.ps-post__action--save[data-saved="1"]:hover::after {
    color: #333; /* Same hover color as other actions */
}

/* Loading state - hide pseudo-element when button is loading */
.ps-post__action--save.ps-loading-pulse::after {
    display: none;
}

/* Ensure the icon and pseudo-element are properly aligned */
.ps-post__action--save {
    display: flex !important;
    align-items: center !important;
}

.ps-post__action--save i {
    margin-right: 6px !important;
}