Comments LESS

@import "../../bootstrap/less/mixins.less";
@import "../../bootstrap/less/variables.less";
@import "../../bootstrap/less/tooltip.less";

/**
 * Style for hiding honeypot input field.
 * Name is weird so bots can't detect the honeypot field through common honeypot field names.
 */
.twinkyness {
    border: 0;
    background: transparent;
    font-size: 0;
    margin: 0;
    padding: 0;
    line-height: 0;
    position: absolute;
    top: -100%;
    left: -100%;
}

.user-photo {
    .border-radius(50%);
}

.feed-title {
    #font .four-of-a-kind;
    @media screen and (max-width: 826px) {
        width: 100%;
        max-width: 654px;
        margin: 0 auto;
    }
    @media screen and (max-width: 580px) {
        #font .full-house;
    }
    @media screen and (max-width: 480px) {
        #font .straight;
    }
    @media screen and (max-width: 390px) {
        #font .three-of-a-kind;
    }
}

.feed-title-link {
    .inline-block();
    border-bottom: 2px solid;
    line-height: 20px;
    color: @logo-blue;
}

.feed-empty {
    padding: 18px 0 80px;
    text-align: center;
    color: @oe-grey;
    > h2 {
        padding-bottom: 16px;
        #font .heavy;
        #font .straight;
    }
    > p {
        margin: 0;
        padding-bottom: 16px;
        #font .three-of-a-kind;
    }
}

.feed-empty-nav {
    .box-sizing(border-box);
    .not-really-a-list();
    .clearfix();
    > li {
        float: left;
        width: 50%;
        @media screen and (max-width: 580px) {
            float: none;
            width: 100%;
            margin-bottom: 16px;
        }
    }
}

.feed-item {
    position: relative;
    margin-bottom: 30px;
    a.at-mention,
    a.post-link {
        color: @logo-blue;
    }
}

.feed-post-cta {
    padding: 0 16px;
    margin-bottom: 24px;
    background: #fff;
    .boxShadow(0px, 3px, 5px, 0px, @pitythefool-grey);
    > a {
        display: block;
        #font .heavy;
        #font .three-of-a-kind;
        color: @logo-blue;
        line-height: 40px;
        position: relative;
        > i {
            position: absolute;
            top: 0;
            right: 0;
            line-height: 46px;
        }
    }
    &.is-inactive {
        .opacity(50);
        pointer-events: none;
    }
}

.feed-item-bottom,
.feed-item-notification {
    position: relative;
    .box-sizing(border-box);
    background: #fff;
}

.feed-item-friend-member-level-change {
    position: relative;
    .box-sizing(border-box);
}

.feed-item-notification {
    height: 78px;
    border: 1px solid @chads-skin;
    &.feed-item-new {
        border: solid 1px @notification-green;
    }
    .feed-item-body {
        padding: 20px;
    }
}

.feed-item-notification-sellable-inventory-available {
    &.feed-item-notification {
        .feed-item-body {
            padding: 0px;
        }
    }
}

.is-moderated {
    .opacity(25);
}

.feed-item-friend-love-group,
.feed-item-comment {
    .arrow-icon > i {
        font-size: 12px;
        color: @pitythefool-grey;
    }
}

.feed-item-bottom {
    border: 1px solid @chads-skin;
    background-color: @even-lighter-grey;
    hr {
        border: 0;
        height: 1px;
        background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), @pitythefool-grey, rgba(0,0,0,0));
        background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), @pitythefool-grey, rgba(0,0,0,0));
        background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), @pitythefool-grey, rgba(0,0,0,0));
        background-image:      -o-linear-gradient(left, rgba(0,0,0,0), @pitythefool-grey, rgba(0,0,0,0));
    }
}

.feed-item-date {
    float: right;
    margin-right: 10px;
    color: @pitythefool-grey;
}

.feed-item-inline-modules {
    .clearfix();
    position: absolute;
    top: 0;
    right: 0;
}

.feed-item-inline-smile {
    .box-sizing(border-box);
    float: right;
    padding-right: 20px;
    @media screen and (max-width: 500px) {
        padding-right: 10px;
    }
}

.feed-item-inline-share {
    cursor: pointer;
    .box-sizing(border-box);
    float: right;
    display: block;
    margin: 20px 10px 0 0;
    background: #fcfcfc;
    color: #808080;
    height: 32px;
    text-align: center;
    border: #ececec solid 1px;
    pointer-events: all;
    .transition(all 0.1s ease-in-out);
    > i {
        display: block;
        margin: 3px 7px 0 8px;
        font-size: 20px;
    }
    &:hover {
        color: @logo-blue;
        border-color: @logo-blue;
    }
    @media screen and (max-width: 500px) {
        right: 75px;
    }
}

.feed-item-inline-follow {
    position: absolute;
    top: 20px;
    right: 0;
    padding-right: 20px;
}

.rounded-portrait-container {
    .box-sizing(border-box);
    display: inline-block;
    border: #fff solid 3px;
    .border-radius(50%);
    vertical-align: middle;
}

.feed-post-rounded-portrait {
    width: 40px;
    .border-radius(50%);
}

.feed-item-loved-by {
    #font .two-pair;
    #font .normal;
    color: @pitythefool-grey;
    border-bottom: 1px solid @really-light-grey;
    line-height: 20px;
    a {
        color: @logo-blue;
        #font .heavy;
    }
}

.feed-item-description {
    position: relative;
    .box-sizing(border-box);
    float: left;
    background-color: #fff;
    padding: 20px 0px 20px 20px;
    width: 100%;
    .feed-item-description-sellable-price-clearance {
        color: @clearance-red;
    }
    .feed-item-smile {
        color: #999;
    }
    .osky-logo, .notification-logo, .member-rewards-img {
        width: 40px;
        float: left;
        .box-sizing(border-box);
        img {
            width: 40px;
        }
    }
    .feed-item-notification & {
        padding: 20px 20px 0 20px;
    }
    svg {
        width: 41px;  // Weird FireFox bug that cuts off 1px of an svg if the height and width are equal
        height: 40px;
        @media screen and (max-width: 480px) {
            width: 32px;
            height: 32px;
        }
    }
    > a {
        display: block;
        position: absolute;
        width: 40px;
        height: 40px;
        @media screen and (max-width: 580px) {
            height: 40px;
        }
        @media screen and (max-width: 480px) {
            height: 32px;
        }
        > img {
            display: block;
            .box-sizing(border-box);
            width: 40px;
            height: 40px;
            @media screen and (max-width: 480px) {
                width: 32px;
                height: 32px;
            }
        }
    }
    a {
        color: @oe-grey;
        &.feed-item-description-name,
        &.feed-item-link {
            color: @logo-blue;
            #font .heavy;
        }
    }
    > span {
        display: block;
        width: 90%;
        vertical-align: middle;
        .box-sizing(border-box);
        padding: 0 32px 0 60px;
        #font .two-pair;
        #font .normal;
        line-height: 17px;
        @media screen and (max-width: 500px) {
            #font .two-pair;
        }
        .feed-item-impersonal & {
            padding-left: 24px;
        }
        .feed-item-description-sellable-price-clearance {
            i {
                color: @clearance-red;
            }
        }
        i {
            font-size: 10px;
            color: @pitythefool-grey;
        }
        @media screen and (max-width: 580px) {
            padding-left: 52px;
            line-height: 25px;
        }
        @media screen and (max-width: 480px) {
            padding-left: 48px;
            line-height: 17px;
        }
        > a {
            > img {
                vertical-align: middle;
                margin-left: 5px;
                .box-sizing(border-box);
                width: 40px;
                @media screen and (max-width: 480px) {
                    width: 32px;
                }
            }
        }
    }
    .feed-item-under-description {
        a {
            color: #999;
        }
        font-size: 11px;
        color: #999;
        @media screen and (max-width: 500px) {
            #font .pair;
        }
    }
    .feed-item-notification-sellable-inventory-available & {
        float: none;
        width: 100%;
    }
}


.feed-item-notification-description {
    width: 100%;
    color: #999;
    .notification-link {
        #font .heavy();
        color: @logo-blue;
    }
    > span {
        @media screen and (max-width: 480px) {
            padding-left: 30px;
        }
    }
    .padding-one-image {
        padding: 0 90px 0 60px;
        @media screen and (max-width: 480px) {
            padding: 0 50px 0 30px;
        }
    }
    .padding-two-image {
        padding: 0 155px 0 60px;
    }
    .feed-item-notification-image {
        position: absolute;
        right: 0;
        top: 0;
        padding: 4px;
        @media screen and (max-width: 480px) {
            padding: 20px 4px;
        }
        img {
            width: 70px;
            @media screen and (max-width: 480px) {
                width: 40px;
            }
        }
    }
    i {
        color: @notification-green;
        font-size: 35px;
        @media screen and (max-width: 500px) {
            font-size: 28px;
        }
    }
}

.feed-item-body {
    position: relative;
    .box-sizing(border-box);
}

.feed-video {
    .box-sizing(border-box);
    width: 100%;
    position: absolute;
    top: 0;
    padding: 0;
    > iframe {
        width: 100%;
    }
}

.feed-video-placeholder {
    width: 100%;
}

.feed-video-play {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 45px;
    width: 45px;
    margin-top: -22px;
    margin-left: -22px;
    background: url('../img/video-play-icon.png') 0 0 transparent;
}

.vine-embed,
.instagram-embed,
.vimeo-embed {
    width: 100%;
    min-height: 480px;
    @media screen and (max-width: 600px) {
        min-height: 600px;
    }
    @media screen and (max-width: 480px) {
        min-height: 330px;
    }
    img {
        width: 100%;
    }
}

.feed-images {
    position: relative;
    overflow: hidden;
    border-right: 1px solid @chads-skin;
    border-left: 1px solid @chads-skin;
    border-top: 1px solid @chads-skin;
    .clearfix();
    img {
        display: block;
        margin: 0 auto;
    }
}

.feed-image {
    position: relative;
    .box-sizing(border-box);
}

.feed-image-full {
    width: 100%;
    padding-bottom: 100%;
    &.video-type-youtube {
        padding-bottom: 75%;
    }
    &.video-type-vine, &.video-type-vimeo, &.video-type-instagram {
        padding-bottom: 0%;
    }
    img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
}

.feed-image-half {
    width: 100%;
    img {
        width: 50%;
    }
}

.feed-image-thirds {
    width: 33.33%;
    float: left;
    img {
        width: 100%;
    }
}

.feed-image-inner {
    position: relative;
    margin: 0;
}

.feed-image-primary {
    width: 66%;
}

.feed-image-secondary {
    width: 34%;
    padding-left: 12px;
    margin-bottom: 12px;
    &:last-child {
        margin-bottom: 0;
    }
    .feed-image-inner {
        margin: 0;
    }
}

.feed-quote {
    position: relative;
    margin: 0 0 16px 0;
    background: #fff;
    border: 1px solid @chads-skin;
    .border-radius(3px);
    padding: 16px;
    .opacity(90);
    &:after, &:before {
        position: absolute;
        height: 0;
        width: 0;
        left: 40px;
        top: 100%;
        border: solid transparent;
        content: " ";
        border-color: rgba(255, 255, 255, 0);
    }
    &:after {
        border-top-color: #fff;
        border-width: 8px;
        margin-left: -5px;
        pointer-events: none;
    }
    &:before {
        border-top-color: @chads-skin;
        border-width: 9px;
        margin-left: -6px;
        pointer-events: none;
    }
    .feed-item-endorsement & {
        &:after, &:before {
            position: absolute;
            height: 0;
            width: 0;
            left: 40px;
            top: -15px;
            bottom: 100%;
            border: solid transparent;
            content: " ";
            border-color: rgba(255, 255, 255, 0);
        }
        &:after {
            border-bottom-color: #fff;
            border-width: 8px;
            margin-left: -5px;
            pointer-events: none;
        }
        &:before {
            border-bottom-color: @really-light-grey;
            border-width: 9px;
            margin-left: -6px;
            margin-top: -2px;
            pointer-events: none;
        }
    }
    &.blockquote-with-media {
        position: absolute;
        border: @really-light-grey solid 1px;
        margin: 16px;
        bottom: 5px;
        width: 85%;
        > p {
            max-height: 400px;
            overflow: hidden;
        }
        @media screen and (max-width: 500px) {
            width: 80%;
            > p {
                max-height: 200px;
            }
        }
    }

    > p {
        position: relative;
        margin: 0;
        #font .slab-serif;
        #font .full-house;
        line-height: 28px;
        word-wrap: break-word;
        @media screen and (max-width: 580px) {
            #font .straight;
            line-height: 24px;
        }
    }
}

.feed-badge {
    position: absolute;
    left: -24px;
    top: 16px;
    z-index: @badge-z-index;
    padding: 0 8px;
    background: @logo-blue;
    .rounded-left(4px);
    #font .heavy;
    #font .pair;
    line-height: 20px;
    color: #fff;
    &:after {
        content: '';
        position: absolute;
        right: -20px;
        border: 10px solid transparent;
        border-left: 10px solid @logo-blue;
    }
}

.feed-item-name {
    #font .heavy;
    #font .three-of-a-kind;
}

.feed-collection-name {
    float: left;
    width: 60%;
    #font .heavy;
    #font .two-pair;
    .text-overflow-ellipsis();
    @media screen and (max-width: 420px) {
        #font .pair;
    }
}

.feed-collection-link {
    float: right;
    width: 40%;
    #font .heavy;
    #font .two-pair;
    color: @logo-blue;
    text-align: right;
    @media screen and (max-width: 420px) {
        #font .pair;
        > span {
            display: none;
        }
    }
}

.feed-item-meta {
    position: absolute;
    width: 53px;
    right: 11px;
    bottom: -3px;
}

.feed-item-meta-data {
    float: left;
    margin: 0;
    padding: 0;
    .clearfix();
    list-style: none;
    #font .heavy;
    #font .two-pair;
    color: @pitythefool-grey;
    line-height: 16px;
    > li {
        position:relative;
        float: left;
        padding-left: 16px;
        @media screen and (max-width: 380px) {
            padding-left: 8px;
        }
        &:first-child {
            padding: 0;
        }
    }
}

.feed-item-smiles {
    list-style-type: none;
    > i {
        position: relative;
        top: 2px;
        font-size: 17px;
    }
}

.feed-item-comments {
    > i {
        position: relative;
        top: 2px;
        font-size: 13px;
        line-height: 12px;
    }
}

.interrupt.is-waiting {
    cursor: wait;
}
.interrupt.is-waiting a {
    cursor: wait !important;
}
.interrupt-header {
    margin-bottom: 20px;
    text-align: center;
}
.interrupt-header p {
    font-size: 13px;
    margin: 10px 0 15px;
}
.interrupt-peekaboo-imac-see-you {
    background-color: white;
    height: 350px;
    overflow: hidden;
    padding-top: 20px;
    border: 1px solid #ddd;
    border-width: 1px 0;
}
.interrupt-peekaboo-imac-see-you img {
    display: block;
    margin: 0 auto;
    position: relative;
    left: 65px;
    max-width: 100%;
}
.interrupt-footer {
    text-align: center;
}
.interrupt-footer-features {
    margin: 30px 0;
    min-height: 150px;
    background-color: #999;
}
.interrupt-footer .interrupt-skip-quiz {
    margin-top: 10px;
}
.interrupt-footer .interrupt-skip-quiz a {
    color: #54C8EC;
    font-weight: bold;
    font-size: 12px;
}

.feed.product {
    .feed-item {
        margin-bottom: 30px;
    }
    .feed-item-friend-love {
        .feed-item-body {
            display: none;
        }
    }
    .feed-item-seller-product {
        .feed-item-body {
            display: none;
        }
    }
}

.product-feed-wrapper {
    background: white;
    padding: 20px 0;
}

.no-feed-items {
    background-color: #ffffff;
    padding: 15px;
    .empty-love {
        text-decoration: underline;
    }
}

.feed-item-body {
    .member-rewards-img {
        display: block;
        margin: 0 auto;
        padding: 16px 0;
        width: 25%;
    }
    .feed-item-friend-member-level-change & {
        background: #fff;
        border-right: 1px solid @chads-skin;
        border-left: 1px solid @chads-skin;
        border-top: 1px solid @chads-skin;
    }
}

.blacklisted-word.highlight {
    color: red;
    font-weight: bold;
}

.hashtag-feed-header {
    position: relative;
    margin: 16px 0 0;
    padding: 15px 20px;
    background: #ccc;
    > h2 {
        #font .slab-serif;
        #font .flush;
        color: @oe-grey;
        .text-overflow-ellipsis();
    }
    &:after {
        .triangle(down, 6px, #ccc);
        position: absolute;
        bottom: -6px;
        left: 50%;
        margin-left: -3px;
    }
}

.hashtag-feed-wrapper {
    .hashtag-feed-header {
        margin-bottom: 20px;
    }
}

.suggested-hashtags {
    width: 100%;
    padding-top: 16px;
    > h3 {
        #font .heavy;
        #font .three-of-a-kind;
        line-height: 24px;
        color: @pitythefool-grey;
    }
    > a {
        display: block;
        #font .normal;
        #font .three-of-a-kind;
        color: @pitythefool-grey;
        line-height: 24px;
        .text-overflow-ellipsis();
        &:hover {
            color: @logo-blue;
        }
    }
}

a.feed-item-link {
    color: @logo-blue;
}

.single-feed-item {
    margin-top: 20px;
}

// Hide the endorsement from comment popups only
.oskypopover-comments-module .feed-item-endorsement {
    display: none;
}

.feed-item-endorsement {
    .feed-item-description {
        float: none;
    }
}

.feed-item-reply {
    position: relative;
    background-color: @even-lighter-grey;
    border-top: @chads-skin 1px solid;
    margin: 0 20px;
    &.feed-item-highlight {
        background-color: #ffc;
    }
    .feed-item-description {
        .box-sizing(border-box);
        min-height: 26px;
        background-color: @even-lighter-grey;
        width: 100%;
        padding: 10px 0;
        float: none;
        > span {
            display: block;
            overflow: hidden;
            white-space: normal;
            text-overflow: ellipsis;
            line-height: 20px;
            color: @oe-grey;
            @media screen and (max-width: 480px) {
                line-height: 20px;
                padding: 0 8px 0 40px;
            }
        }
        @media screen and (max-width: 500px) {
            padding: 15px 0;
        }
    }
}

.feed-item-time-row {
    > a {
        .inline-block();
        margin-right: 4px;
    }
}

.feed-post-wrapper {
    &.feed-post-wrapper-profile {
        margin-top: 40px;
    }
}

.feed-post-feed {
    .show-more-wrap {
        border-top: 1px solid @chads-skin;
        padding: 20px 0;
        margin: 0 20px;
    }
}

a.morelink {
    display: block;
    font-size: 14px;
    #font .normal;
    font-weight: bold;
    color: @pitythefool-grey;
}

.morecontent div {
    display: none;
}

.feed-item-user-information {
    position: absolute;
    background-color: #fff;
    border: #dcdcdc solid 1px;
    height: 101px;
    width: 205px;
    top: 0;
    right: -230px;
    text-align: center;
    @media screen and (max-width: 1000px) {
        display: none;
    }
    &:before {
        position: absolute;
        left: -8px;
        top: 30px;
        .triangle(left, 8px, #dcdcdc);
    }
    &:after {
        position: absolute;
        left: -7px;
        top: 30px;
        .triangle(left, 8px, #E8F9FE);
    }
    .feed-item-user-follow {
        background-color: #e8f9fe;
        padding: 20px 0;
    }
    .feed-item-description-user-name {
        #font .heavy;
        #font .three-of-a-kind;
        margin: 0 0 14px 0;
        &:hover {
            color: @logo-blue;
        }
    }
}

.object-love {
    .do-love {
        display: block;
    }
    .do-unlove {
        display: none;
    }
    &.love-it {
        .do-unlove {
            display: block;
        }
        .do-love {
            display: none;
        }
    }
}

.feed-item-footer {
    background-color: @even-lighter-grey;
}

.feed-item {
    .feed-item-object-card-body {
        .box-sizing(border-box);
        background: #fff;
        border-right: 1px solid @chads-skin;
        border-left: 1px solid @chads-skin;
        border-top: 1px solid @chads-skin;
    }
}

.feed-filters {
    margin-top: 20px;
    .filter a {
        padding: 8px 16px;
        text-align: left;
        line-height: 14px;
    }
}

.trending-filters {
    margin-top: 20px;
    h3.title {
        #font .four-of-a-kind;
        margin-bottom: 10px;
    }
    .filter a {
        padding: 8px 16px;
        text-align: left;
        line-height: 14px;
    }
}

.feed-item-object-card-body {
    padding: 4px;

    // @media screen and (max-width: 320px) {
    //     padding-bottom: 0px;
    // }

    .clearfix();
    .feed-item-object-card-info {
        text-align: center;
        background-color: #e8f9fe;
        height: 242px;
        width: 50%;
        .box-sizing(border-box);
        display: inline-block;
        float: left;
        .image {
            margin-top: 20px;
            @media screen and (max-width: 580px) {
                margin: 10px 0;
            }

            @media screen and (max-width: 320px) {
                margin: 4px 0;
            }

            img {
                width: 80px;
                @media screen and (max-width: 580px) {
                    width: 50px;
                }
            }
        }
        .name, .person-name {
            margin: 20px 0;
            white-space: nowrap;
            overflow: hidden;

            @media screen and (max-width: 580px) {
                margin: 10px 0;
            }

            @media screen and (max-width: 320px) {
                margin: 0 0 4px 0;
                font-size: 13px;
            }
        }
        .follow {
            margin: 20px 0;
            @media screen and (max-width: 580px) {
                margin: 10px 0;
            }

            @media screen and (max-width: 320px) {
                margin: 3px 0;
            }
        }
        .num-followers {
            #font .normal;
            #font .three-of-a-kind;
            color: @pitythefool-grey;

            @media screen and (max-width: 320px) {
                font-size: 12px;
            }
        }

        @media screen and (max-width: 580px) {
            height: 175px;
        }

        @media screen and (max-width: 320px) {
            height: 135px;
        }
    }
    .feed-item-object-card-products {
        width: 50%;
        padding-left: 4px;
        .box-sizing(border-box);
        display: inline-block;
        float: right;
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;

            @media screen and (max-width: 320px) {
                height: 135px;
                margin-right: -2px;
            }

            li {
                display: inline;
                img {
                    width: 48%;
                }
                &.less-than-four-sellables {
                    img {
                        width: 100%;

                        @media screen and (max-width: 320px) {
                            width: 99%;
                        }
                    }
                }
            }
        }
    }
}

.feed-recommendation {
    margin-bottom: 30px;
    .box-sizing(border-box);
    background: #fff;
    border: 1px solid @chads-skin;
    .feed-recommendation-bottom {
        border-top: #e7e7e7 solid 1px;
        padding: 16px;
        .feed-recommendation-description {
            > span {
                display: block;
                vertical-align: middle;
                .box-sizing(border-box);
                #font .two-pair;
                #font .normal;
                line-height: 20px;
                a {
                    color: @logo-blue;
                    #font .heavy;
                }
            }
        }
    }
}

.feed-item-share {
    position: relative;
    #font .heavy;
    #font .two-pair;
    color: #999;
    a {
        @media screen and (max-width: 500px) {
            #font .pair;
        }
    }
    .feed-item-share-buttons {
        .inline-block();
        position: absolute;
        top: 0;
        left: 4px;
        min-width: 100px;
    }
    &:before {
        content: " · ";
        color: #999;
        position: relative;
        left: -2px;
    }
}

.feed-item-more-menu {
    width: 200px;
    background-color: @really-light-grey;
    position: absolute;
    border: @chads-skin solid 1px;
    z-index: @tooltip-z-index;
    ul {
        .not-really-a-list();
        span {
            display: inline-block;
            color: @pitythefool-grey;
            #font .heavy;
            margin-bottom: 5px;
        }
        li.share {
            height: 110px;
            padding: 8px;
            background-color: #fff;
            border-bottom: 1px solid @really-light-grey;
            span.url {
                #font .normal;
                #font .three-of-a-kind;
                white-space: nowrap;
                overflow: hidden;
                display: block;
            }
        }
    }
    .moderation {
        background-color: #fff;
        height: 30px;
        padding-top: 8px;
        padding-left: 8px
    }
    .feed-item-moderation-text {
        font-size: 12px;
        #font .normal;
    }
    &:after, &:before {
        top: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }
    &:after {
        border-color: rgba(255, 255, 255, 0);
        border-top-color: #fff;
        border-width: 8px;
        right: 12px;
    }
    &:before {
        border-color: rgba(255, 255, 255, 0);
        border-top-color: @chads-skin;
        border-width: 10px;
        right: 10px;
    }
    &.logged-out {
        &:after {
            border-top-color: @really-light-grey;
        }
    }
}

.feed-item-reply-moderation-form {
    display: inline;
    .feed-item-reply-moderation {
        font-size: 11px;
        cursor: pointer;
        .feed-item-reply-moderation-label {
            display: inline-block;
            padding-left: 4px;
        }
    }
}

.feed-item-reaction-counts {
    .clearfix();
    clear: both;
    padding-left: 17px;
    background-color: #fff;
    border-top: @chads-skin solid 1px;
    ul {
        .not-really-a-list();
        > li {
            #font .three-of-a-kind;
            #font .normal;
            line-height: 40px;
            float: left;
            #font .two-pair;
            color: @pitythefool-grey;
            margin-left: 10px;
            .number {
                color: @oe-grey;
                #font .heavy;
            }
        }
    }
}

.feed-item-reaction-bar {
    position: relative;
    clear: both;
    padding-left: 15px;
    padding-right: 12px;
    background-color: @even-lighter-grey;
    border-top: @chads-skin solid 1px;
    height: 70px;
    &:after, &:before {
        position: absolute;
        height: 0;
        width: 0;
        right: 40px;
        bottom: 100%;
        border: solid transparent;
        content: " ";
        border-color: rgba(255, 255, 255, 0);
    }
    &:after {
        border-bottom-color: @even-lighter-grey;
        border-width: 8px;
        margin-right: -5px;
        pointer-events: none;
    }
    &:before {
        border-bottom-color: @chads-skin;
        border-width: 9px;
        margin-right: -6px;
        pointer-events: none;
    }
    .reactions {
        clear: left;
        .not-really-a-list();
        .reaction-button-container {
            width: 50px;
            margin:0 4px;
            text-align: center;
        }
        .reaction-bar-love {
            color: @tint-pink;
            &.is-loved, &.is-loving, &.love-it {
                background-color: @tint-pink;
                color: @accent-plum;
            }
            i {
                position: relative;
                top: 4px;
            }
        }
        .reaction-bar-smile {
            color: @logo-blue;
            &.is-loved, &.is-loving, &.love-it {
                background-color: @logo-blue;
                color: @secondary-blue;
            }
            i {
                position: relative;
                top: 4px;
            }
        }
        .reaction-bar-reply {
            color: @notification-green;
            &.active {
                color: @secondary-green;
                background-color: @tint-green;
            }
            i {
                position: relative;
                top: 5px;
            }
        }
        .more {
            text-align: right;
            float: right;
            margin-right: 24px;
            i {
                color: #adadad;
                font-size: 15px;
                &:hover {
                    .no-touch & {
                        color: @logo-blue;
                    }
                }
            }
        }
        .buy {
            a {
                i {
                    position: relative;
                    top: 4px;
                    font-size: 20px;
                }
            }
        }
        > li {
            #font .three-of-a-kind;
            #font .normal;
            line-height: 45px;
            float: left;
            padding-top: 10px;
            i {
                font-size: 22px;
            }
            &.is-disabled {
                a {
                    .opacity(40);
                    cursor: default;
                    color: #999;
                    &:hover {
                        color: #999;
                    }
                }
            }
        }
    }
}

.reaction-bar-button {
    position: relative;
    display: block;
    background: #ffffff;
    .border-radius(50%);
    .boxShadow(0,2px,0,0,rgba(0,0,0,0.1));
    pointer-events: all;
    text-align: center;
    &:hover {
        .no-touch & {
            top: -1px;
            box-shadow: rgba(0, 0, 0, 0.0980392) 0px 3px 0px 0px;
        }
    }
}

.feed-item-smiles-bar {
    .text-overflow-ellipsis();
    clear: left;
    background-color: @even-lighter-grey;
    border-top: @chads-skin solid 1px;
    #font .normal;
    line-height: 30px;
    margin: 0 20px;
    font-size: 12px;
    color: @pitythefool-grey;
    a {
        color: @logo-blue;
        #font .heavy;
    }
    @media screen and (max-width: 500px) {
        margin: 0 10px;
        #font .two-pair;
        line-height: 36px;
    }
}

.feed-trending-hashtags {
    padding: 24px 20px 26px;
    margin-bottom: 30px;
    background: #fff;
    .text-overflow-ellipsis();
    > h3 {
        #font .light;
        #font .full-house;
        color: @pitythefool-grey;
        margin: 0 0 20px 3px;
    }
}

.trending-hashtag {
    position: relative;
    max-width: 224px;
    max-height: 224px;
    margin: 0 3px;
    > a {
        display: block;
        > img {
            width: 225px;
            @media screen and (max-width: 320px) {
                width: 127px;
            }
        }
        > span {
            position: absolute;
            bottom: 0;
            left: 0;
            .box-sizing(border-box);
            display: block;
            width: 100%;
            padding: 0 20px;
            background: rgba(0,0,0,0.7);
            #font .normal;
            #font .two-pair;
            color: #fff;
            line-height: 50px;
            .text-overflow-ellipsis();
            @media screen and (max-width: 420px) {
                line-height: 36px;
                padding: 0 10px;
            }
        }
    }
}

.tooltip * {
    text-align: left;
}

.feed-item-hashtags {
    .clearfix();
    margin-bottom: 20px;
    margin-right: 20px;
    ul {
        .not-really-a-list();
        li {
            padding-left: 5px;
            padding-right: 5px;
            float: left;
            .inline-block();
            > a {
                border: none !important;
                color: @pitythefool-grey;
                #font .two-pair;
            }
        }
    }
}

.feed-post {
    position: relative;
    background-color: #fff;
    margin: 0 20px 20px;
    border: @chads-skin 1px solid;
    .merchant-portal & {
        margin: 16px 0;
    }
    .mentions-input-box {
        background-color: none;
        min-height: 33px;
    }
    .mentions {
        display: none;
    }
    .feed-post-button {
        position: absolute;
        bottom: 3px;
        right: 5px;
        .btn {
            line-height: 22px;
        }
    }
    .textarea {
        padding: 2px 86px 2px 4px;
        min-height: 33px;
        textarea {
            overflow: hidden;
            minheight: 22px;
            height: 22px;
            background: none;
            lineheight: 16px;
            border: none;
            padding: 0;
            padding-top: 8px;
            width: 100%;
            // .straight is to prevent zooming on on ios when focusing on textarea
            #font .straight;
            #font .normal;
            resize: none;
            outline: none;
        }
    }
    .product-feed-wrapper .feed-post-feed & {
        margin: 0 20px 20px;
    }
    .tabs-content &, .product-feed-wrapper & {
        margin: 0 0 20px 0;
    }
}

Follow Button LESS

body {
    margin: 0;
    padding: 0;
}

.osky-follow-widget.disabled {
    .widget-btn,
    .widget-count {
        opacity:0.4;
        filter:alpha(opacity=40); /* For IE8 and earlier */
    }
}

/* Widget 1 */

iframe.widget1 {
    height: 28px;
    width: auto;
}

.widget1 {
    .osky-follow-widget {
      font: normal normal normal 11px/1.7 "Helvetica Neue", Arial, sans-serif;
      color: #333;
      white-space: nowrap;
      -webkit-user-select: none;
         -moz-user-select: none;
           -o-user-select: none;
              user-select: none;
    }

    .osky-follow-widget .widget-btn {
      position: relative;
      float: left;
      height: 26px;
      font-weight: bold;
      color: #333;
      text-decoration: none;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
      white-space: nowrap;
      vertical-align: top;
      background-color: #0E405E;
      border: #0E405E solid 1px;
      -webkit-border-radius: 3px;
         -moz-border-radius: 3px;
              border-radius: 3px;
      outline: none;
      filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#dedede');
    }

    .osky-follow-widget.disabled {
        .widget-btn,
        .widget-count {
            opacity:0.4;
            filter:alpha(opacity=40); /* For IE8 and earlier */
        }
    }

    .osky-follow-widget .widget-btn i {
      background: transparent url('../img/logo-52.png') 2px 2px no-repeat;
      background-size: 20px 20px;
      height: 22px;
      left: 1px;
      position: absolute;
      top: 1px;
      width: 22px;
    }

    .osky-follow-widget .widget-label {
      display: inline-block;
      *display: inline;
      font-size: 11px;
      padding: 4px 5px 0 26px;
      zoom: 1;
      color: #ffffff;
    }

    .osky-follow-widget .widget-count {
      position: relative;
      display: inline-block;
      *display: inline;
      height: 21px;
      width: auto;
      text-align: center;
      margin-left: 5px;
      padding-top: 5px;
      border-image: initial;
      background: white;
      border: #BBB solid 1px;
      -webkit-border-radius: 3px;
         -moz-border-radius: 3px;
              border-radius: 3px;
      zoom: 1;
    }

    .osky-follow-widget .widget-count i, 
    .osky-follow-widget .widget-count u {
      position: absolute;
      top: 50%;
      left: 0;
      width: 0;
      height: 0;
      margin: -4px 0 0 -4px;
      line-height: 0;
      border: 4px transparent solid;
      border-left: 0;
      _border-color: pink;
      border-right-color: #AAA;
      zoom: 1;
      _filter: chroma(color=pink);
    }

    .osky-follow-widget .widget-count u {
      margin-left: -3px;
      border-right-color: white;
    }

    .osky-follow-widget .widget-val {
      padding: 2px 3px;
    }
}

/* Widget 2 */

iframe.widget2 {
    height: 50px;
    width: 125px;
}

.widget2 {
    .osky-follow-widget {
      font: normal normal normal 11px/1.7 "Helvetica Neue", Arial, sans-serif;
      color: #333;
      white-space: nowrap;
      -webkit-user-select: none;
         -moz-user-select: none;
           -o-user-select: none;
              user-select: none;
    }

    .osky-follow-widget .widget-btn {
      position: relative;
      float: left;
      height: 40px;
      font-weight: bold;
      color: #333;
      text-decoration: none;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
      white-space: nowrap;
      vertical-align: top;
      background-color: #0E405E;
      border: #0E405E solid 1px;
      -webkit-border-radius: 3px;
         -moz-border-radius: 3px;
              border-radius: 3px;
      outline: none;
      filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#dedede');
    }

    .osky-follow-widget .widget-btn i {
      background: transparent url('../img/logo-52.png') 3px 3px no-repeat;
      background-size: 30px 30px;
      height: 33px;
      width: 33px;
      left: 1px;
      position: absolute;
      top: 1px;
    }

    .osky-follow-widget .widget-label {
      display: inline-block;
      *display: inline;
      font-size: 13px;
      padding: 8px 5px 0 38px;
      zoom: 1;
      color: #ffffff;
    }

    .osky-follow-widget .widget-count {
      position: relative;
      display: inline-block;
      *display: inline;
      height: 30px;
      width: auto;
      text-align: center;
      margin-left: 5px;
      padding-top: 10px;
      border-image: initial;
      background: white;
      border: #BBB solid 1px;
      -webkit-border-radius: 3px;
         -moz-border-radius: 3px;
              border-radius: 3px;
      zoom: 1;
    }

    .osky-follow-widget .widget-count i, 
    .osky-follow-widget .widget-count u {
      position: absolute;
      top: 50%;
      left: 0;
      width: 0;
      height: 0;
      margin: -4px 0 0 -4px;
      line-height: 0;
      border: 4px transparent solid;
      border-left: 0;
      _border-color: pink;
      border-right-color: #AAA;
      zoom: 1;
      _filter: chroma(color=pink);
    }

    .osky-follow-widget .widget-count u {
      margin-left: -3px;
      border-right-color: white;
    }

    .osky-follow-widget .widget-val {
      padding: 2px 3px;
    }
}

Love Button LESS

a.osky-iframe-btn {
    text-decoration: none;
}
.osky-btn-loved {
    border-color: #d1d1d1;
    color: #999;
    .osky-btn-img {
        left: -1px;
        top: -1px;
    }
}
[class="osky-btn"]:hover {
    border-color: #999;
}
body.osky-love {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 11px;
    margin: 0px;
    padding: 0;
    height: 22px;
}
.osky-count:after {
    border: 4px solid transparent;
    border-right-color: #fff;
    left: -8px;
    margin-top: -4px;
}
.osky-count:after, .osky-count:before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
}
.osky-count {
    border-color: #e1e1e1;
    color: #4c4c4c;
    margin-left: 0.25em;
}
.osky-count:before {
    border: 5px solid transparent;
    border-right-color: #e1e1e1;
    left: -10px;
    margin-top: -5px;
}
iframe.osky-widget1 {
    height: 23px;
    width: 108px;
}
.osky-btn-string {
    display: inline-block;
    font-weight: bold;
    padding-left: 15px;
    text-shadow: -1px 1px #fff;
}
.osky-btn {
    background-color: #CCC;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fafafa), to(#f5f5f5));
    background-image: -webkit-linear-gradient(top, #fafafa, #f5f5f5);
    background-image:    -moz-linear-gradient(top, #fafafa, #f5f5f5);
    background-image:     -ms-linear-gradient(top, #fafafa, #f5f5f5);
    background-image:      -o-linear-gradient(top, #fafafa, #f5f5f5);
    border-color: #b3b3b3;
    color: #574f54;
    cursor: pointer;
    font-family: inherit;
    overflow: hidden;
}
.osky-btn, .osky-count {
    border: 1px solid;
    border-color:#d1d1d1;
    -webkit-border-radius: 0.25em;
    -moz-border-radius: 0.25em;
    border-radius: 0.25em;
    display: inline-block;
    font-size: 1em;
    height: 20px;
    line-height: 18px;
    padding: 0 0.5em;
    position: relative;
    vertical-align: top;
}
.osky-btn-img {
    display: block;
    left: -3px;
    position: absolute;
    top: 2px;
}