/* The border, radius and padding come from the theme's .box/.bordered/
   .round-corner classes on the container in base.html, the same ones the post
   and the closing footer carry. What those can't supply is here. The surface
   colour is painted by an element selector in theme.css -- `header, article,
   footer` -- which a div isn't, so take the same variable directly; that keeps
   the box khaki in production and green under development.css, which recolours
   the site by overriding the variable alone. Its width comes from theme.css,
   which lines it up with the post above alongside the closing footer. The
   container also sits outside the .stack that spaces the post and footer, hence
   its own margin; and it has to vanish while empty, or the stream pages the
   script deliberately skips would show a bare box. */
#webmentions {
    background-color: var(--color-light);
    margin-block: var(--space);
}

#webmentions:empty {
    display: none;
}

#webmentions .comments {
    max-height: 20em;
    /* overflow-x: hidden; */
    /* overflow-y: scroll; */
    font-size: 80%;
}

#webmentions h3 {
    /* font-size: medium; */
    margin: 0;
    padding: 2px;
    background: #ccc;
}

#webmentions .reacts img {
    margin: 3px -1ex 1px 0;
}

#webmentions ul {
    list-style-type: none;
    margin: 0;
    padding: 4px;
}

#webmentions li {
    text-indent: -1em;
    padding-left: 1em;
}

#webmentions a.reaction {
    position: relative;
    text-decoration: none;
    text-shadow: 0px 0px 3px white;
    margin-right: 0;
    letter-spacing: -1ex;
    margin-right: 1ex;
}

#webmentions a.reaction img {
    max-height: 1.3em;
    margin-right: -1ex;
    border-radius: 25%;
}

#webmentions a.reaction sub {
    font-size: 50%;
}

#webmentions .comments li {
    /* white-space: nowrap; */
    /* text-overflow: ellipsis; */
    /* overflow: hidden; */
}

#webmentions .comments li .text {
    color: #555;
    font-style: italic;
    text-decoration: none;
}

#webmentions .comments li .name {
    color: #111;
}