/* 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. .center sizes to the measure with
   content-box, which would leave the padding and border hanging outside it, so
   count them in and the box lines up with the post above rather than out-
   denting past it. 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 {
    box-sizing: border-box;
    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;
}