:root {
   --mastodon-comment-indent: 40px;
   --mastodon-comment-border-radius: 3px;

   --mastodon-comment-bg-color: rgba(0, 0, 0, 0.2);
   --mastodon-comment-border-color: rgba(0, 0, 0, 0.4);
   --mastodon-comment-user-color: #939393;

   --mastodon-comment-status--inactive: #5d686f;
   --mastodon-comment-status-replies--active: #448aff;
   --mastodon-comment-status-favourite--active: #ff9100;
   --mastodon-comment-status-reblog--active: #00c853;
}

@media only screen and (max-width: 1024px) {
   :root {
      --mastodon-comment-indent: 20px;
   }
}

@media only screen and (max-width: 640px) {
   :root {
      --mastodon-comment-indent: 0px;
   }
}

.mastodon-comment {
   background-color: var(--mastodon-comment-bg-color);
   border-radius: var(--mastodon-comment-border-radius);
   border: 1px var(--mastodon-comment-border-color) solid;
   padding: 20px;
   margin-bottom: 1.5rem;
   display: flex;
   flex-direction: column;
}

.mastodon-comment p {
   margin-bottom: 0px;
}

.mastodon-comment .content {
   margin: 15px 20px;
}

.mastodon-comment .content p:first-child {
   margin-top: 0;
   margin-bottom: 0;
}

.mastodon-comment .attachments {
   max-width: 0px 10px;
}

.mastodon-comment .attachments>* {
   max-width: 0px 10px;
}

.mastodon-comment .author {
   padding-top: 0;
   display: flex;
}

.mastodon-comment .author a {
   text-decoration: none;
}

.mastodon-comment .author .avatar img {
   margin-right: 1rem;
   min-width: 60px;
   border-radius: 5px;
}

.mastodon-comment .author .details {
   display: flex;
   flex-direction: column;
}

.mastodon-comment .author .details .name {
   font-weight: bold;
}

.mastodon-comment .author .details .user {
   color: var(--mastodon-comment-user-color);
}

.mastodon-comment .author .date {
   margin-left: auto;
   font-size: small;
}

.mastodon-comment .status>div {
   display: inline-block;
   margin-right: 15px;
}

.mastodon-comment .status a {
   color: var(--mastodon-comment-status--inactive);
   text-decoration: none;
}

.mastodon-comment .status .twemoji.replies.active a {
   color: var(--mastodon-comment-status-replies--active);
}

.mastodon-comment .status .twemoji.reblogs.active a {
   color: var(--mastodon-comment-status-reblog--active);
}

.mastodon-comment .status .twemoji.favourites.active a {
   color: var(--mastodon-comment-status-favourite--active);
}

.mastodon-comment .status svg {
   margin-right: 0.2rem;
   vertical-align: middle;
}



/* Wordpress Reactions */

.activitypub-reactions {
   margin-bottom: 2rem;
   margin-top: 2rem;
   position: relative
}

.activitypub-reactions.has-background,
.activitypub-reactions.has-border {
   box-sizing: border-box;
   padding: 2rem
}

.activitypub-reactions .activitypub-reactions {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap
}

.activitypub-reactions .reaction-group {
   align-items: center;
   display: flex;
   gap: .75rem;
   justify-content: flex-start;
   margin: .5em 0;
   position: relative;
   width: 100%
}

@media(max-width:782px) {
   .activitypub-reactions .reaction-group:has(.reaction-avatars:not(:empty)) {
      justify-content: space-between
   }
}

.activitypub-reactions .reaction-group .reaction-avatars {
   align-items: center;
   display: flex;
   flex-direction: row;
   list-style: none;
   margin: 0 !important;
   padding: 0
}

.activitypub-reactions .reaction-group .reaction-avatars li {
   margin: 0 -10px 0 0;
   padding: 0;
   transition: transform .2s ease
}

.activitypub-reactions .reaction-group .reaction-avatars li:not([hidden]):not(:has(~li:not([hidden]))) {
   margin-right: 0
}

.activitypub-reactions .reaction-group .reaction-avatars li:hover {
   transform: translateY(-2px);
   z-index: 2
}

.activitypub-reactions .reaction-group .reaction-avatars li a {
   border-radius: 50%;
   box-shadow: none;
   display: block;
   line-height: 1;
   text-decoration: none
}

.activitypub-reactions .reaction-group .reaction-avatar {
   max-height: 32px;
   max-width: 32px;
   overflow: hidden;
   -moz-force-broken-image-icon: 1;
   border: .5px solid var(--mastodon-comment-user-color, hsla(0, 0%, 100%, .8));
   border-radius: 50%;
   box-shadow: 0 0 0 .5px hsla(0, 0%, 100%, .8), 0 1px 3px rgba(0, 0, 0, .2);
   transition: transform .6s cubic-bezier(.34, 1.56, .64, 1);
   will-change: transform
}

.activitypub-reactions .reaction-group .reaction-avatar:focus-visible,
.activitypub-reactions .reaction-group .reaction-avatar:hover {
   position: relative;
   transform: translateY(-5px);
   z-index: 1
}

.activitypub-reactions .reaction-group .reaction-label {
   align-items: center;
   background: none;
   border: none;
   border-radius: 4px;
   color: currentColor;
   display: flex;
   flex: 0 0 auto;
   font-size: 70%;
   gap: .25rem;
   padding: .25rem .5rem;
   text-decoration: none;
   transition: background-color .2s ease;
   white-space: nowrap
}

.activitypub-reactions .reaction-group .reaction-label:hover {
   background-color: rgba(0, 0, 0, .05);
   color: currentColor
}

.activitypub-reactions .reaction-group .reaction-label:focus:not(:disabled) {
   box-shadow: none;
   outline: 1px solid currentColor;
   outline-offset: 2px
}

.reactions-list {
   list-style: none;
   margin: 0 !important;
   padding: .5rem
}

.components-popover__content>.reactions-list {
   padding: 0
}

.reactions-list .reaction-item {
   margin: 0 0 .5rem
}

.reactions-list .reaction-item:last-child {
   margin-bottom: 0
}

.reactions-list .reaction-item a {
   align-items: center;
   border-radius: 4px;
   box-shadow: none;
   color: inherit;
   display: flex;
   gap: .75rem;
   padding: .5rem;
   text-decoration: none;
   transition: background-color .2s ease
}

.reactions-list .reaction-item a:hover {
   background-color: rgba(0, 0, 0, .03)
}

.reactions-list .reaction-item img {
   border: 1px solid var(--mastodon-comment-user-color, #f0f0f0);
   border-radius: 50%;
   box-shadow: none;
   height: 36px;
   width: 36px
}

.reactions-list .reaction-item .reaction-name {
   font-size: 75%
}

.components-popover__content {
   box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
   max-height: 300px;
   max-width: -moz-min-content;
   max-width: min-content;
   min-width: 250px;
   padding: .5rem;
   width: auto
}