/* Emoticons are bundled SVG images so they look the same in every browser.
   Graphics from Twemoji (https://github.com/jdecked/twemoji), (c) Twitter, Inc and other contributors, licensed under CC-BY 4.0 (https://creativecommons.org/licenses/by/4.0/) */
.emoji{
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    vertical-align: middle;
    background: no-repeat center / contain;
    filter: grayscale(100%);
    opacity: 0.45;
    transition: filter 0.2s, opacity 0.2s;
}
.emoji.emoji-color{
    filter: none;
    opacity: 1;
}

/**************emoji sizes**************/
.emoji-enormous{
    font-size:200%;
}
.emoji-huge{
    font-size:150%;
}
.emoji-big{
    font-size:125%;
}
.emoji-bigger{
    font-size:150%;
}
.emoji-small{
    font-size:75%;
}
.emoji-smaller{
    font-size:50%;
}
.emoji-tiny{
    font-size: 25%;
}

/**************emojis**************/
.emoji-sad {
    background-image: url(../images/1f622.svg);
}
.emoji-mildlyunamused {
    background-image: url(../images/1f623.svg);
}
.emoji-whatever {
    background-image: url(../images/1f610.svg);
}
.emoji-smile {
    background-image: url(../images/1f603.svg);
}
.emoji-grin-eyes {
    background-image: url(../images/1f601.svg);
}
.emoji-noanswer {
    background-image: url(../images/274c.svg);
    background-size: 55%;
    /* the slider stop for "no answer" sits left of the label centre */
    background-position: calc(50% - 0.25em) center;
}