/*
* !!! WARNING !!!
* Editing this file may cause your instance to break for EVERYONE.
* Please know what you're doing and test it out with regular user custom CSS.
* With that said, GLHF!
* This may eventuallly be replaced with a function in the admin panel.
 */

/*
Highlighted DMs
Adds an accent-colored border around direct/mention-only notes and highlights the note visibility icon to help distinguish DMs in the timeline
Note: Firefox users will need to enable the layout.css.has-selector.enabled setting in about:config
*/

div:has(>article.article i.ph-envelope-simple-open),
div:has(>article.reply-to i.ph-envelope-simple-open) {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: solid 2px var(--accent);
    border-top: none;
    border-bottom: none;
}

article.article i.ph-envelope-simple-open,
article.reply-to i.ph-envelope-simple-open {
    padding: 2px 6px;
    color: var(--fgOnAccent) !important;
    background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
    border-radius: var(--radius);
    text-shadow: none;
}

/*
Media Caption Warning
Adds a pulsing warning outline to images and videos that don't have alt text (captions)
*/

.image img:not([alt]),
.image img[alt=""],
.plyr:has(.plyr__video-wrapper video:not([aria-label])),
.plyr:has(.plyr__video-wrapper video[aria-label=""]) {
    border: 2px dotted  var(--accent);
    border-radius: var(--radius);
    box-sizing: border-box;
}

/*
Consistent Reactions
Makes the reactions on notes look more like the reactions in the reactions tab
*/

button._button:has(>img.mk-emoji.icon) {
    padding: 1px 6px 0;
    border: solid 2px transparent;
    border-radius: 6px;
    height: inherit;
}

button._button.reacted:has(>img.mk-emoji.icon) {
    border-color: var(--accent);
}

button._button.reacted:has(>img.mk-emoji.icon)::before {
    background: none;
}

button._button.reacted:has(>img.mk-emoji.icon)>span {
    color: inherit;
    font-weight: inherit;
}

footer.footer>.reactions-list {
    gap: 8px;
}}