Lupe Attachements

/* add search icon overlay on embedded attachments/images */
.embeddedAttachmentLink,
.embeddedImageLink {
    display: inline-block;
    position: relative;

    &::after {
        background-color: rgba(0, 0, 0, .8);
        border-radius: 2px;
        bottom: @wcfGapSmall;
        color: white;
        content: @fa-var-search;
        display: block;
        font-family: FontAwesome;
        font-size: 21px;
        opacity: .5;
        padding: 2px 8px;
        position: absolute;
        right: @wcfGapSmall;
        text-decoration: none;

        .boxShadow(0, 0, rgba(0, 0, 0, .15), 0, 3px);
        .transition(opacity, .1s);
    }

    &:hover {
        &::after {
            opacity: .8;
        }
    }
}

.messageBody a.embeddedAttachmentLink {
    position: relative;
    display: inline-block;
    .transition(all, .2s);
    margin-right: 7px;
    margin-bottom: 7px;
}


.messageBody a.embeddedAttachmentLink:after {
    content: "\f002";
    font-family: FontAwesome;
    font-size: 16px;
    right: 10px;
    bottom: 10px;
    position:absolute;
    background-color: rgba(0, 0, 0, 0.35);
    color: rgba(255, 255, 255, 0.85);
    width: 30px;
    height: 30px;
    border-radius: 3px;
    line-height: 30px;
    text-align:center;
    .transition(all, .2s);
}


.messageBody a.embeddedAttachmentLink:hover:after {
    background-color: rgba(0, 0, 0, 0.85);
    box-shadow: 
        0px 0px 0px 2px rgba(255, 255, 255, 0.5), 
        0px 0px 15px rgba(0, 0, 0, 0.35);
    .transition(all, .2s);
}