/*These must apply to all child attributes*/
::deep {
    .mention {
        text-decoration: none;
        background-color: var(--highlight-color);
        border-radius: 1em;
        padding: 0.2em 0.5em;

        > .host {
            opacity: 0.5;
        }

        > .user {

        }
    }
}

::deep {
    .mention {
        text-decoration: none;
        color: var(--notice-color);
    }
}

::deep {
    .emoji {
        display: inline;
        position: relative;
        top: 0;

        > img {
            height: 2em;
            vertical-align: middle;
            transition-duration: 250ms;
        }
    }
}

::deep {
    .emoji {
        > img:hover {
            transform: scale(1.5);
            transition-duration: 250ms;
            position: relative;
            z-index: +1;
        }
    }
}

::deep {
    .emoji.simple {
        > img {
            height: 1.25em;
            vertical-align: -0.25em;
        }
    }
}

::deep {
    .emoji.simple {
        > img:hover {
            transform: none;
        }
    }
}

::deep {
    .quote-node {
        /*Copying the appearance of -js*/
        margin: 8px 0;
        padding-left: 12px;
        border-left: solid 4px var(--highlight-color);
    }
}

::deep {
    .link-node {
        color: var(--link);
    }
}

::deep {
    .url-node {
        color: var(--link);
    }
}

::deep {
    .hashtag-node {
        text-decoration-line: none;
        color: var(--link);
    }
}

::deep {
    .hashtag-node:hover {
        text-decoration-line: underline;
    }
}

::deep {
    .plain {
        text-decoration: none;
    }
}

::deep {
    .code-pre {
        overflow: auto;
    }
}

/* fn nodes */
::deep {
    .fn-flip.h {
        display: inline-block;
        transform: scaleX(-1);
    }
}

::deep {
    .fn-flip.v {
        display: inline-block;
        transform: scaleY(-1);
    }
}

::deep {
    .fn-flip.h.v {
        display: inline-block;
        transform: scaleX(-1) scaleY(-1);
    }
}

::deep {
    .fn-blur {
        filter: blur(6px);
        transition: filter 0.3s;
    }
}

::deep {
    .fn-blur:hover {
        filter: blur(0);
    }
}

@keyframes fn-jelly {
    0% {
        transform: scaleZ(1)
    }
    30% {
        transform: scale3d(1.25, .75, 1)
    }
    40% {
        transform: scale3d(.75, 1.25, 1)
    }
    50% {
        transform: scale3d(1.15, .85, 1)
    }
    65% {
        transform: scale3d(.95, 1.05, 1)
    }
    75% {
        transform: scale3d(1.05, .95, 1)
    }
    to {
        transform: scaleZ(1)
    }
}

@keyframes fn-tada {
    0% {
        transform: scaleZ(1)
    }
    10%,
    20% {
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
    }
    30%,
    50%,
    70%,
    90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
    }
    40%,
    60%,
    80% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
    }
    to {
        transform: scaleZ(1)
    }
}

@keyframes fn-jump {
    0% {
        transform:translateY(0)
    }
    25% {
        transform:translateY(-16px)
    }
    50% {
        transform:translateY(0)
    }
    75% {
        transform:translateY(-8px)
    }
    to {
        transform:translateY(0)
    }
}

@keyframes fn-bounce {
    0% {
        transform: translateY(0) scale(1)
    }
    25% {
        transform: translateY(-16px) scale(1)
    }
    50% {
        transform: translateY(0) scale(1)
    }
    75% {
        transform: translateY(0) scale(1.5, .75)
    }
    to {
        transform: translateY(0) scale(1)
    }
}

@keyframes fn-shake {
    0% {
        transform: translate(-3px, -1px) rotate(-8deg)
    }
    5% {
        transform: translateY(-1px) rotate(-10deg)
    }
    10% {
        transform: translate(1px, -3px) rotate(0)
    }
    15% {
        transform: translate(1px, 1px) rotate(11deg)
    }
    20% {
        transform: translate(-2px, 1px) rotate(1deg)
    }
    25% {
        transform: translate(-1px, -2px) rotate(-2deg)
    }
    30% {
        transform: translate(-1px, 2px) rotate(-3deg)
    }
    35% {
        transform: translate(2px, 1px) rotate(6deg)
    }
    40% {
        transform: translate(-2px, -3px) rotate(-9deg)
    }
    45% {
        transform: translateY(-1px) rotate(-12deg)
    }
    50% {
        transform: translate(1px, 2px) rotate(10deg)
    }
    55% {
        transform: translateY(-3px) rotate(8deg)
    }
    60% {
        transform: translate(1px, -1px) rotate(8deg)
    }
    65% {
        transform: translateY(-1px) rotate(-7deg)
    }
    70% {
        transform: translate(-1px, -3px) rotate(6deg)
    }
    75% {
        transform: translateY(-2px) rotate(4deg)
    }
    80% {
        transform: translate(-2px, -1px) rotate(3deg)
    }
    85% {
        transform: translate(1px, -3px) rotate(-10deg)
    }
    90% {
        transform: translate(1px) rotate(3deg)
    }
    95% {
        transform: translate(-2px) rotate(-3deg)
    }
    to {
        transform: translate(2px, 1px) rotate(2deg)
    }
}

::deep {
    .fn-animation {
        display: inline-block;
        animation-delay: 0s;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
}

@keyframes fn-spin {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}

@keyframes fn-spin-x {
    0% {
        transform: perspective(128px) rotateX(0)
    }
    to {
        transform: perspective(128px) rotateX(360deg)
    }
}

@keyframes fn-spin-y {
    0% {
        transform: perspective(128px) rotateY(0)
    }
    to {
        transform: perspective(128px) rotateY(360deg)
    }
}

::deep {
    .fn-spin {
        display: inline-block;
        animation-delay: 0s;
        animation-duration: 1.5s;
        animation-fill-mode: both;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
}

::deep {
    .fn-rotate {
        display: inline-block;
        transform-origin: center center 0;
    }
}