/* Animate side bar on resize. */
div[class^=sidebar_]
div[class^=sidebarList_] {
    transition: width .1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hide Discord elements. */
div[class^=scroller_] > div[class^=listItem_]:nth-last-child(2) > *,
div[class^=scroller_] > div[class^=listItem_]:nth-last-child(3) > *,
div[class*=" scroller_"] > div[class^="listItem_"]:nth-last-child(2) {
    display: none !important;
}

/* Assign 'rainbow' color to my nickname! */
img[src*="423864076095979522"] ~ :is(h1,h2,h3,h4,h5,h6) > span > span {
    animation: rainbow linear 20s infinite;
}

:root {
    --neon-shadow: 0 0 3px;
}

.theme-dark {
    --rb: 75%
}

.theme-light {
    --rb: 35%
}

@keyframes rainbow {
    0% {
        color: hsl(0, 100%, var(--rb));
        text-shadow: var(--neon-shadow) hsl(0, 100%, var(--rb));
    }
    15% {
        color: hsl(39, 100%, calc(var(--rb) - 5%));
        text-shadow: var(--neon-shadow) hsl(39, 100%, calc(var(--rb) - 5%));
    }
    30% {
        color: hsl(60, 100%, calc(var(--rb) - 10%));
        text-shadow: var(--neon-shadow) hsl(60, 100%, calc(var(--rb) - 10%));
    }
    45% {
        color: hsl(120, 100%, calc(var(--rb) - 5%));
        text-shadow: var(--neon-shadow) hsl(120, 100%, calc(var(--rb) - 5%));
    }
    60% {
        color: hsl(240, 100%, calc(var(--rb) + 6%));
        text-shadow: var(--neon-shadow) hsl(240, 100%, calc(var(--rb) + 6%));
    }
    75% {
        color: hsl(275, 100%, calc(var(--rb) + 4%));
        text-shadow: var(--neon-shadow) hsl(275, 100%, calc(var(--rb) + 4%));
    }
    90% {
        color: hsl(300, 100%, calc(var(--rb) + 2%));
        text-shadow: var(--neon-shadow) hsl(300, 100%, calc(var(--rb) + 2%));
    }
    100% {
        color: hsl(360, 100%, var(--rb));
        text-shadow: var(--neon-shadow) hsl(360, 100%, var(--rb));
    }
}

div[class^=bar_] {
    height: 0px;
}

/* Hide "help" button. */
div[class^=toolbar_] > a {
    display: none;
}

/* Fix popup position going negative. Also sets fixed toolbar popup position. */
div[id^=popout_]:is([style*="; right: -"],[style*="; top: 44px;"]) {
    right: 16px !important;
}

/* Limit elements width to not take space above the screen width. */
div[class^=layerContainer_] :not([class*=Tooltip], [data-mana-component=modal]) {
    max-width: 100vw;
}

/* Mobile interface tweaks */
@media screen and (max-width: 480px) {
    div[class^=channelTextArea_] > div[class^=scrollableContainer_] >
    div[class^=inner_] > div[class^=buttons_] > :not(:nth-last-child(2)) {
        display: none;
    }
    /* Hide search input if the screen is too small to display toolbar right.*/
    section[class^=title_] > div[class^=toolbar_] > div[class^=search_] {
        display: none;
    }
    /* Fix popup position being to far from the right/left. */
    div[id^=popout_][style] {
        right: 0px !important;
        left: unset !important;
    }
    /* Fix size of some popups take slightly higher width than they should be. */
    div[role=dialog] div[class^=header_] {
        box-sizing: border-box;
    }
}