/* ==========================================================================
   TOPPERWORK — CUSTOM EMOJI COMPONENT
   Reusable across Rich Text, Messages, Live Chat, Job posts, etc.
   ========================================================================== */


.topperwork-custom-emoji {
    display: inline-block;

    width: 1.2em;
    height: 1.2em;

    margin:
        0
        0.06em;

    vertical-align: -0.2em;

    flex: 0 0 auto;

    user-select: none;
    -webkit-user-select: none;
}


/* ==========================================================================
   TOPPERWORK LOGO EMOJI
   ========================================================================== */

.topperwork-custom-emoji--logo {
    background-image:
        url('/assets/images/topperwork-custom-emoji-logo.png');

    background-repeat:
        no-repeat;

    background-position:
        center;

    background-size:
        contain;

    filter:
        drop-shadow(
            0
            1px
            2px
            rgba(59, 130, 246, 0.22)
        );
}


/* ==========================================================================
   TOPPERWORK GRADIENT HEART
   ========================================================================== */

.topperwork-custom-emoji--heart {
    position: relative;

    text-align: center;

    line-height: 1;
}


.topperwork-custom-emoji--heart::before {
    content: "♥";

    display: block;

    font-size:
        1.18em;

    font-weight:
        900;

    line-height:
        1;

    background:
        linear-gradient(
            135deg,
            #22D3EE 0%,
            #3B82F6 34%,
            #8B5CF6 66%,
            #EC4899 100%
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

    filter:
        drop-shadow(
            0
            1px
            2px
            rgba(139, 92, 246, 0.28)
        );
}


/* ==========================================================================
   RICH-TEXT EMOJI PICKER PREVIEW
   ========================================================================== */

.topperwork-rich-text-editor__emoji
.topperwork-custom-emoji {
    width: 1.35rem;
    height: 1.35rem;

    margin: 0;

    vertical-align: middle;
}


.topperwork-rich-text-editor__emoji
.topperwork-custom-emoji--heart::before {
    font-size:
        1.35rem;
}