/* ==UserStyle==
@name         Dark-Discord
@namespace    gitlab.com/vednoc/dark-discord
@description  Dark and light, very customizable theme for Discord.
@author       vednoc <vednoc@pm.me> (https://github.com/vednoc)
@homepageURL  https://gitlab.com/vednoc/dark-discord
@supportURL   https://gitlab.com/vednoc/dark-discord/issues
@updateURL    https://userstyles.world/api/style/15.user.css
@version      0.63.0
@license      MIT
@preprocessor stylus

@var checkbox cg_debug     'Color generator debug' 0
@var select   cg_theme     'Base color-scheme toggle' {
    'Custom colors   *': 'custom',
    'Dark blue (old)  ': 'old',
    'Dark gray (new)  ': 'new',
}
@var color    cg_bg        'Base background color' #1f232a
@var color    cg_fg        'Base foreground color' #eeeeee
@var color    cg_ac        'Base accent color    ' #7289da

@var range    _bg_a        'Adjust background color tones' [0, -25, 25, 0.1, '%']
@var range    _fg_a        'Adjust foreground color tones' [0, -25, 25, 0.1, '%']
@var range    _ac_a        'Adjust accent color tones    ' [0,   0, 25,   1, '%']
@var range    _sc_a        'Adjust syntax color tones    ' [0,   0, 25,   1, '%']

@var range    e_size       'Emotes: Reduce emote size' [32, 24, 64, 8, 'px']
@var checkbox e_reaction   'Emotes: Larger reaction emotes' 1

@var checkbox chat_short   'Shorter chat mode' 0
@var text     chat_short_w 'Shorter chat width' 800px

@var checkbox guild_avatar 'Move user menu to guilds bar' 0

@var checkbox sb_short     'Smaller sidebar mode' 1
@var text     sb_short_s   'Smaller sidebar mode size' 64px
@var text     sb_short_w   'Smaller sidebar mode breakpoint' 940px
@var text     sb_short_d   'Smaller sidebar mode hover delay' 1000ms

@var checkbox g_minimize   'Minimize guild area width' 1
@var text     g_minimize_w 'Minimize guild area breakpoint' 700px

@var checkbox g_icons      'Small guild icons' 0
@var text     g_icons_s    'Small guild icon size' 32px

@var select   compact      'Compact mode' {
    'Hide guilds   ': 'guilds',
    'Hide sidebar  ': 'sidebar',
    'Hide both    *': 'both',
}
@var text     compact_w    'Compact mode breakpoint' 540px

@var range    avatar_size  'Avatar size in info menus' [80, 80, 128, 16, 'px']
@var checkbox avatar_c_m   'Enable avatar context menu in profiles' 1
@var checkbox code_lines   'Enable code line numbers' 1

@var checkbox hide_dl_btn  'Hide "Download Apps" button' 1

@var text     f_ui         'UI font' ''font_name''
@var text     f_code       'Monospace font' ''font_name''

@var text     b_radius     'Border radius for menus' 4px

@var color    _red         'Base red color              ' #f07178
@var color    _orange      'Base orange color           ' #f78c6c
@var color    _yellow      'Base yellow color           ' #ffcb6b
@var color    _green       'Base green color            ' #aede62
@var color    _cyan        'Base cyan color             ' #89ddff
@var color    _blue        'Base blue color             ' #82aaff
@var color    _magenta     'Base magenta color          ' #9a91ea
@var color    _violet      'Base violet color           ' #c792ea
@var color    _gray        'Gray color                  ' #bbbbbb
@var color    _white       'White color                 ' #ffffff
@var color    _sh          'Shadow color                ' #00000025
==/UserStyle== */

// Class mixin.
// TODO: Add examples.
a(args, prefix = '', attr = 'class', i = '') {
    lst ?= ''
    dbg ?= args
    len ?= length(args)
    u    = unquote

    // Check arguments.
    if args[0] == 0 {
        error('Must provide valid arguments. Length of arguments is: ' + len)
    }

    // Process.
    for v, k in args {
        content: s('%s --- %s', k, v)

        // Iterate over arguments.
        if k {
            // { '--%s' % k }: 'argument: ' + args[k]
            if k == length(args) - 1 {
                lst += s('[%s*=%s]', u(attr), v)
            } else {
                lst += s('[%s*=%s], ', u(attr), v)
            }
        } else {
            // { '--%s' % k }: 'argument: ' + args[k]
            if k == length(args) - 1 {
                lst += s('[%s*=%s]', u(attr), v)
            } else {
                lst += s('[%s*=%s], ', u(attr), v)
            }
        }
    }

    // Combine.
    list = (i != '') ? s('%s%s', u(i), u(lst)) : lst
    dbg = list

    // Generate.
    { list } {
        { block }
    }
}

// Old class mixin.
/// Use it instead of: [class*='foo_bar']
w(prefix, args, attr = class, sel = '*=', i = ' ') {
    r = unquote
    list = ''

    selectors = (prefix == '>' || prefix == '~' || prefix == '+')
    prefix = (selectors) ? s('%s ', r(prefix)) : (prefix == '') ? '' : prefix

    inline_cases = (prefix == '/' || prefix == '../' || prefix == '~/' || prefix == '')
    inline = ((selectors || inline_cases) && length(args) == 1) ? '' : i

    attr = (attr == 0) ? 'class' : (attr == '_') ? '' : attr
    sel = (sel == 0) ? '*=' : (sel == '_') ? '' : sel
    // dbg_{ attr }: s('%s ::: %s ::: %s ::: %s', prefix, attr, inline, args)

    for item, index in args {
        // dbg: '' + item + ' :::::: ' + index
        if index {
            if (inline == '0') {
                list += s(' [%s%s%s]', r(attr), r(sel), item)
            } else if (inline == ' ') {
                list += s('%s%s[%s%s%s],', r(inline), r(prefix), r(attr), r(sel), item)
            } else {
                list += s('[%s%s%s]', r(attr), r(sel), item)
            }
        } else {
            if (inline == '0') {
                list += s('%s[%s%s%s]', r(prefix), r(attr), r(sel), item)
            } else if (inline != '') {
                list += s('%s%s[%s%s%s],', r(inline), r(prefix), r(attr), r(sel), item)
            } else {
                list += s('%s[%s%s%s]', r(prefix), r(attr), r(sel), item)
            }
        }
    }

    list = replace(',$', '', list)
    // dbg_list: '' + list

    { list } {
        { block }
    }
}

// Colors mixin.
/// All colors: `c: fg bd bg`
/// Only border-color: `c: 0 bd`
c(x, y = 0, z = 0, xi = 1, yi = 1, zi = 1) {
    if x != 0 && x != '_' {            color: xi is 0 ? x : x i }
    if y != 0 && y != '_' {     border-color: yi is 0 ? y : y i }
    if z != 0 && z != '_' { background-color: zi is 0 ? z : z i }
}

// SVG colors.
v(x, y = 0, xi = 1, yi = 1) {
    if x != 0 && x != '_' {   fill: xi is 0 ? x : x i }
    if y != 0 && y != '_' { stroke: yi is 0 ? y : y i }
}

// Pseudo-element builder.
P(a, _z = 0, _c = '', _p = absolute) {
    z-index:  _z
    content:  _c
    position: _p
    if a[0] is a 'call' or a[0] is a 'unit' {    top: a[0] }
    if a[1] is a 'call' or a[1] is a 'unit' {  right: a[1] }
    if a[2] is a 'call' or a[2] is a 'unit' { bottom: a[2] }
    if a[3] is a 'call' or a[3] is a 'unit' {   left: a[3] }
}

// Raw RGB mixin.
/// Convert RGBA (if t = 1) or HEX to raw rrr-ggg-bbb format.
to_rgb(input, t = 0) {
    if (t) {
        unquote(substr(join(',', slice(split(',', s('%s', input)), 0, -1)), 5))
    } else {
        unquote(slice(s('%s', rgba(input, 0)), 5, -3))
    }
}

// Raw RGBA mixin.
/// Combine `*-rgb` vars and alpha value.
to_rgba(input, alpha) {
    unquote(s('rgba(var(--%s-rgb), %s)', unquote(input), alpha))
}

// Border radius mixin.
r() { border-radius: arguments }

// Box-shadow mixin.
b() { box-shadow: arguments }

/// Remove old browser prefixes.
vendors = official

/// Feat -> Base color-scheme toggle. #32
if (cg_theme == 'custom') {
    BG = cg_bg
    FG = cg_fg
    AC = cg_ac
} else if (cg_theme == 'old') {
    BG = #1f232a
    FG = #eeeeee
    AC = #7289da
} else if (cg_theme == 'new') {
    BG = #292929
    FG = #e6e6e6
    AC = #d47d3f
}

/// Helpers.
t  = transparent
i  = !important
BA = _bg_a
FA = _fg_a
AA = _ac_a
SA = _sc_a
//w  = W // TODO: Developer only.

// Color generator.
/// NOTE: Fix the scope to avoid conflicts.
/{
    g = global

    /// Generator rules.
    if (dark(BG)) {
        a1 = (AA + 15); a2 = (AA + 30); a3 = (AA + 45); a4 = (AA + 65); a5 = (AA + 75)
        s1 = (SA + 15); s2 = (SA + 30); s3 = (SA + 45); s4 = (SA + 65); s5 = (SA + 75)
        b1 = (BA + 10); b2 = (BA - 05); b3 = (BA - 10); b4 = (BA - 15); b5 = (BA - 20)
        f1 = (FA - 10); f2 = (FA + 10); f3 = (FA + 20); f4 = (FA + 30); f5 = (FA + 40)
    } else {
        a1 = (AA + 15); a2 = (AA + 30); a3 = (AA + 45); a4 = (AA + 65); a5 = (AA + 75)
        s1 = (SA + 15); s2 = (SA + 30); s3 = (SA + 45); s4 = (SA + 65); s5 = (SA + 75)
        b1 = (BA - 10); b2 = (BA + 08); b3 = (BA + 16); b4 = (BA + 24); b5 = (BA + 32)
        f1 = (FA - 05); f2 = (FA - 10); f3 = (FA - 15); f4 = (FA - 20); f5 = (FA - 30)
    }

    /// Generate tones for base colors.
    C = {
        bg: {
            '0': darken(BG, b1)
            '1': darken(BG, 0%)
            '2': darken(BG, b2)
            '3': darken(BG, b3)
            '4': darken(BG, b4)
            '5': darken(BG, b5)
        },
        fg: {
            '0': darken(FG, f1)
            '1': darken(FG, 0%)
            '2': darken(FG, f2)
            '3': darken(FG, f3)
            '4': darken(FG, f4)
            '5': darken(FG, f5)
        },
        ac: {
            '0': mix(darken(BG,  0%), AC, 0%)
            '1': mix(darken(BG, 40%), AC, a1)
            '2': mix(darken(BG, 40%), AC, a2)
            '3': mix(darken(BG, 40%), AC, a3)
            '4': mix(darken(BG, 65%), AC, a4)
            '5': mix(darken(BG, 50%), AC, a5)
        },
        b1: {
            '0': spin(_red,  0deg - 0%)
            '1': spin(_red, 15deg - s1)
            '2': spin(_red, 30deg - s2)
            '3': mix(darken(BG, 20%), _red, s3)
            '4': mix(darken(BG, 40%), _red, s4)
            '5': mix(darken(BG, 40%), _red, s5)
        },
        b2: {
            '0': spin(_orange,  0deg - 0%)
            '1': spin(_orange, 15deg - s1)
            '2': spin(_orange, 30deg - s2)
            '3': mix(darken(BG, 20%), _orange, s3)
            '4': mix(darken(BG, 40%), _orange, s4)
            '5': mix(darken(BG, 40%), _orange, s5)
        },
        b3: {
            '0': spin(_yellow,  0deg - 0%)
            '1': spin(_yellow, 15deg - s1)
            '2': spin(_yellow, 30deg - s2)
            '3': mix(darken(BG, 20%), _yellow, s3)
            '4': mix(darken(BG, 40%), _yellow, s4)
            '5': mix(darken(BG, 40%), _yellow, s5)
        },
        b4: {
            '0': spin(_green,  0deg - 0%)
            '1': spin(_green, 15deg - s1)
            '2': spin(_green, 30deg - s2)
            '3': mix(darken(BG, 20%), _green, s3)
            '4': mix(darken(BG, 40%), _green, s4)
            '5': mix(darken(BG, 40%), _green, s5)
        },
        b5: {
            '0': spin(_cyan,  0deg - 0%)
            '1': spin(_cyan, 15deg - s1)
            '2': spin(_cyan, 30deg - s2)
            '3': mix(darken(BG, 20%), _cyan, s3)
            '4': mix(darken(BG, 40%), _cyan, s4)
            '5': mix(darken(BG, 40%), _cyan, s5)
        },
        b6: {
            '0': spin(_blue,  0deg - 0%)
            '1': spin(_blue, 15deg - s1)
            '2': spin(_blue, 30deg - s2)
            '3': mix(darken(BG, 20%), _blue, s3)
            '4': mix(darken(BG, 40%), _blue, s4)
            '5': mix(darken(BG, 40%), _blue, s5)
        },
        b7: {
            '0': spin(_magenta,  0deg - 0%)
            '1': spin(_magenta, 15deg - s1)
            '2': spin(_magenta, 30deg - s2)
            '3': mix(darken(BG, 20%), _magenta, s3)
            '4': mix(darken(BG, 40%), _magenta, s4)
            '5': mix(darken(BG, 40%), _magenta, s5)
        },
        b8: {
            '0': spin(_violet,  0deg - 0%)
            '1': spin(_violet, 15deg - s1)
            '2': spin(_violet, 30deg - s2)
            '3': mix(darken(BG, 20%), _violet, s3)
            '4': mix(darken(BG, 40%), _violet, s4)
            '5': mix(darken(BG, 40%), _violet, s5)
        }
    }

    /// Generate Stylus-lang variables.
    define('bg-' + key, val, g) for key, val in C.bg
    define('fg-' + key, val, g) for key, val in C.fg
    define('ac-' + key, val, g) for key, val in C.ac
    define('b1-' + key, val, g) for key, val in C.b1
    define('b2-' + key, val, g) for key, val in C.b2
    define('b3-' + key, val, g) for key, val in C.b3
    define('b4-' + key, val, g) for key, val in C.b4
    define('b5-' + key, val, g) for key, val in C.b5
    define('b6-' + key, val, g) for key, val in C.b6
    define('b7-' + key, val, g) for key, val in C.b7
    define('b8-' + key, val, g) for key, val in C.b8

    /// Generate Stylus-lang helpers for CSS variables.
    define('bg' + key, s('var(--bg-%s)', unquote(key)), g) for key, val in C.bg
    define('fg' + key, s('var(--fg-%s)', unquote(key)), g) for key, val in C.fg
    define('ac' + key, s('var(--ac-%s)', unquote(key)), g) for key, val in C.ac
    define('b1' + key, s('var(--b1-%s)', unquote(key)), g) for key, val in C.b1
    define('b2' + key, s('var(--b2-%s)', unquote(key)), g) for key, val in C.b2
    define('b3' + key, s('var(--b3-%s)', unquote(key)), g) for key, val in C.b3
    define('b4' + key, s('var(--b4-%s)', unquote(key)), g) for key, val in C.b4
    define('b5' + key, s('var(--b5-%s)', unquote(key)), g) for key, val in C.b5
    define('b6' + key, s('var(--b6-%s)', unquote(key)), g) for key, val in C.b6
    define('b7' + key, s('var(--b7-%s)', unquote(key)), g) for key, val in C.b7
    define('b8' + key, s('var(--b8-%s)', unquote(key)), g) for key, val in C.b8
}

@-moz-document regexp('https?://discord(app)?.com/(app|channels|discovery|library|store|gui.*|log.*)(/.*)?') {
    /// Show debug.
    if (cg_debug) {
        :root {
            content: 'a mixin'
            +a('x', i: '/') {
                --divider: _;
                --debug: dbg
                --len: len
            }
            +a(x y z) {
                --divider: _;
                --debug: dbg
                --len: len
            }
            +a(1 2 3) {
                --divider: _;
                --debug: dbg
                --len: len
            }
        }

        :root {
            &::before {
                content: \
                '  ⭐ BG: ' + luminosity(BG) + \
                '  ⭐ FG: ' + luminosity(FG) + \
                '  🌟 bg1: ' + bg-1 + \
                '  🌟 fg1: ' + fg-1 + \
                '  🌟 ac1: ' + ac-1 i
                P(0 0 0 0)
                text-align: center
                line-height: 2em
                height: 2em
                c: fg1 0 bg3
            }
            body > div[id] {
                margin-top: calc(2em + 0px)
                max-height: calc(100vh - 2em)
                b: 0 -1px bg5
            }
        }
    }

    // Use stylus-lang variables with CSS variables.
    shadow  = var(--shadow)
    sh      = var(--shadow)
    bsh     = var(--bshadow)
    white   = var(--white)
    outer   = 0 0 0 1px bg5
    inner   = inset outer
    rc      = var(--radius)

    :root, .theme-dark {
        /// Userstyle info.
        --note: 'Dark-Discord v0.63.0'

        /// Native variables.
        --header-primary:               fg1 //#ffffff
        --header-secondary:             fg4 //#b9bbbe
        --text-normal:                  fg1 //#dcddde
        --text-muted:                   fg5 //#72767d
        --text-link:                    ac0 //#00b0f4
        --channels-default:             fg4 //#8e9297
        --interactive-normal:           fg2 //#b9bbbe
        --interactive-hover:            fg1 //#dcddde
        --interactive-active:           fg0 //#ffffff
        --interactive-muted:            fg5 //#4f545c
        --background-primary:           bg1 //#36393f
        --background-secondary:         bg2 //#2f3136
        --background-secondary-alt:     bg3 //#292b2f
        --background-tertiary:          bg4 //#202225
        --background-accent:            bg5 //#4f545c
        --background-mobile-primary:    bg1 //#36393f
        --background-mobile-secondary:  bg2 //#2f3136
        --background-floating:          bg0 //#18191c
        --background-modifier-hover:    bg3 //rgba(79,84,92,0.16)
        --background-modifier-active:   bg4 //rgba(79,84,92,0.24)
        --background-modifier-selected: bg5 //rgba(79,84,92,0.32)
        --background-modifier-accent:   bg3 //hsla(0,0%,100%,0.06)
        --background-mentioned:         mix(ac-5, bg-1, 40) //rgba(250,166,26,0.05)
        --background-mentioned-hover:   mix(ac-4, bg-1) //rgba(250,166,26,0.08)
        --background-message-hover:     bg0 //rgba(4,4,5,0.07)

        /// Scrollbars.
        --scrollbar-thin-thumb:                 bg5 //#202225
        --scrollbar-thin-track:                 transparent
        --scrollbar-auto-thumb:                 bg5 //#202225
        --scrollbar-auto-track:                 bg1 //#2e3338
        --scrollbar-auto-scrollbar-color-thumb: bg5 //#202225
        --scrollbar-auto-scrollbar-color-track: bg1 //#2f3136

        /// Shadows.
        --elevation-stroke:             inner //0 0 0 1px rgba(4,4,5,0.15)
        --elevation-low:                0 1px bg5 // ...0 2px 0 rgba(4,4,5,0.05)
        // --elevation-medium:             0 4px 4px rgba(0,0,0,0.16)
        --elevation-high:               0 8px 16px 2px sh //0 8px 16px rgba(0,0,0,0.24)

        /// Various backgrounds.
        --radio-group-dot-foreground:   ac1 //#8ea1e1
        --channeltextarea-background:   bg3 //#40444b
        --activity-card-background:     bg0 //#202225
        --textbox-markdown-syntax:      fg4 //#8e9297
        --deprecated-card-bg:           bg3 //#20222599
        --deprecated-card-editable-bg:  bg2 //#2022254d
        --deprecated-store-bg:          bg1 //#36393f

        /// Settings -> My account -> Edit settings.
        --deprecated-text-input-bg:              bg3 //#0000001a
        --deprecated-text-input-border:          bg4 //#0000004d
        --deprecated-text-input-border-hover:    bg5 //#040405
        --deprecated-text-input-border-disabled: bg0 //#202225
        --deprecated-text-input-prefix:          ac1 //#dcddde

        /// Modals -> Quickswitcher -> Fix input colors.
        --deprecated-quickswitcher-input-background:  bg4 //#72767d
        --deprecated-quickswitcher-input-placeholder: fg2 //#ffffff4d

        /// Reduce emoji size.
        --e-size: e_size

        /// Generate color variables.
        for _v in (bg fg ac b1 b2 b3 b4 b5 b6 b7 b8) {
            for _i in 0..5 {
                key = s('--%s-%s', _v, _i)
                /// Escape `\` for `*-0` vars.
                val = _v + \- + _i

                /// Generate CSS variables.
                { key }: val i
                { key + '-rgb' }: to_rgb(val)
            }
        }

        /// Various theme variables.
        --shadow  : _sh
        --bshadow : 0 8px 16px var(--shadow)
        --white   : _white
        --t       : transparent i
        --radius  : b_radius
        --f-mono  : f_code, Consolas, Liberation Mono, Menlo, Courier, monospace
        --f-ui    : f_ui, Whitney, Helvetica Neue, Helvetica, Arial, sans-serif
        --avatar-s: avatar_size
    }

    // Base styles.
    body {
        c: 0 0 bg0

        /// Global -> Browser defaults.
        ::selection { c: bg5 0 fg1 }
        ::-moz-selection { c: bg5 0 fg1 }

        /// Global -> Text placeholders.
        +w('', 'emptyPlaceholder') {
            &, ../ ::placeholder { c: fg2 }
        }

        /// Chat -> Placeholders in member list.
        +w('', 'GroupsPlaceholder' 'placeholderAvatar-' 'placeholderUsername-') {
            --background-primary: bg3
        }

        /// Feat -> Custom UI font.
        &, button, input, select, textarea, ::placeholder {
            font-family: var(--f-ui) i
        }

        /// Shortcuts.
        +w('', 'keybindShortcut') {
            span {
                c: fg1 bg4 bg2
                b: inset 0 -4px 0 bg5 i
                svg g { v: fg4 }
            }
        }

        /// App -> Core.
        +w('', 'appMount-') {
            c: 0 0 t

            /// Skeleton/Crashed page.
            +w('>', 'errorPage-') { c: 0 0 bg1 }

            /// 'No channel' page.
            +w('', 'noChannel-') {
                c: 0 0 bg1
                h4 { c: fg1 }
                h4 + div { c: fg4 }
            }

            /// Notice alert.
            +w('', 'notice-') {
                r: 0px
                +w('&', 'Brand-') { c: 0 0 ac3 }
                +w('&', 'Default-') { c: 0 0 b33 }
                +w('&', 'height36-') { c: 0 0 bg3 }
                +w('&', 'Neutral-') {
                    c: fg1 0 bg4
                    +w('', 'button-') {
                        c: fg1 bg5 bg4
                        &:hover { c: 0 0 bg5 }
                    }
                }
            }
        }

        /// Status colors.
        svg {
            rect[fill^='hsl(38'] { v: b20 }
            rect[fill^='hsl(139'] { v: b40 }
            rect[fill^='hsl(214'] { v: fg5 }
            rect[fill^='hsl(359'] { v: b10 }

            /// User status menu.
            [mask*='status-offline'] > div { c: 0 0 fg5 }
            [mask*='status-online'] > div { c: 0 0 b40 }
            [mask*='status-idle'] > div { c: 0 0 b20 }
            [mask*='status-dnd'] > div { c: 0 0 b10 }
        }

        /// Badges.
        +w('', 'numberBadge-') {
            /// Global -> 'NEW' alerts.
            /.badge-_BgAUQ,
            /// Inbox -> Unreads.
            /.wrapper-232cHJ,
            /// Unread messages.
            &[style *= 'nd-color: rgb(240\, 71\, 71)'],
            &[style *= 'nd-color: rgb(237\, 66\, 69)'],
            /// Quickswitcher -> Unread messages.
            /[class *= 'quickswitcher-'] [class *= 'badge'],
            /// Guilds -> New messages.
            /[class *= 'mention-'][class *= 'bar'],
            /// Guilds -> Settings -> New settings.
            /[class *= 'gearWithBadge-'] > div:last-child,
            /// Chat -> Pinned messages.
            /[class *= 'iconBadge-'] {
                c: white 0 ac0
            }
        }

        /// Buttons.
        [role = 'button'] {
            &[style *= 'b(67\, 181\, 129'] { c: white 0 b42 }
        }

        /// Feat -> Line numbers for code blocks.
        if (code_lines) {
            pre code {
                c: fg1
                position: relative
                padding-left: 3em i
                /// -> Generate a range of numbers.
                n = ''
                for num in 1..128 {
                    n += s('%s ', num)
                    if (num == 128) {
                        n += s('%s', num)
                    }
                }
                /// -> Use a psuedo-element as line numbers.
                &::before {
                    width: 2ch
                    overflow-y: hidden
                    P(0.5em 0 0.5em 0px, 0, n)
                    padding: 0 0.5em 0 1.5em
                    white-space: pre-line
                    text-align: right
                    c: fg5
                }
            }
        }

        /// Global -> Tooltips.
        +a(tooltipBlack-, i: '/') {
            border: 1px solid bg5
            c: fg1 0 bg3
            b: 0 4px 8px shadow i

            +w('', 'Pointer-') { border-top-color: bg5 i }
        }

        /// Fix 'Server Boosting' and similar tooltips.
        +a(subscribeTooltipWrapper-, i: '/') {
            c: 0 0 ac3
            &::after { border-bottom-color: ac3 i }
        }

        /// Guilds -> Voice -> Activity popout.
        +w('', 'container-3JTnYm') {
            border: 1px solid bg5 i
            r: rc
        }

        /// Chat -> Inline mentions.
        +w('', 'mention interactive', i: '') {
            transition: 0.2s ease-in-out

            /// Hover/active states.
            &:hover, &.popout-open { c: white 0 ac1 }
            +w('/', 'mentioned-' 'mention', i: 0) { &:not(#z) { c: ac0 0 t }}

            /// Search -> Highlighted matches.
            /.highlight { c: 0 0 ac4 }
        }

        /// Global -> Bot tags.
        +a(botTagInvert-, i: '/') { c: white 0 ac0 }

        /// Global -> Context menus.
        +w('', 'contextMenu-') {
            border: 1px solid bg5 i
        }

        /// Global -> Login page.
        +w('', 'authBox-') {
            border: 1px solid bg5 i
            b: var(--elevation-high) i
            r: rc i
            c: fg5
        }
    }

    // Global -> Switches/Checkboxes.
    +w('', 'switch-') {
        &:not([class*='themeClear-']) {
            c: 0 0 bg4
            &::after { c: 0 0 fg1 }

            /// Enabled.
            +w('&', 'Checked-') {
                c: 0 0 ac1
                &::after { c: 0 0 white }
            }
        }

        +a(checkbox-, i: '/') {
            /// Squared.
            +w('&', 'box-') {
                c: 0 bg5

                /// 'Mark as spoiler' checkbox.
                &[style*='r-color: rgb(114\, 137\, 218)'] {
                    c: 0 ac1
                    svg path { v: ac1 }
                }

                /// In bars or standalone.
                &[style*='d-color: rgb(114\, 137\, 218)'] {
                    c: white ac1 ac1
                    svg path { v: white }
                }
            }

            /// Rounded.
            +w('&', 'round-') {
                &[style *= '67\, 181\, 129'] { c: 0 b41 b41 }
            }
        }
    }

    // Global -> Sliders.
    +w('', 'control-') {
        [style*="d-color: rgb(67\, 181\, 129"] { c: 0 0 b43 }
        [style*="d-color: rgb(114\, 118\, 125"] { c: 0 0 bg5 }
        rect[fill='white'] { v: bg0 }
        +w('', 'slider-') {}
    }

    // Global -> Dropdown menus.
    +w('', 'select-') {
        +w('', '-control') {
            c: red bg4 bg2
            &:hover, &:focus-within { c: 0 bg5 }
        }
        +w('', '-menu') {
            c: red bg5 bg2
            +w('', '-option') { &:hover { c: 0 0 bg3 }}
            .css-1ba14n5-option { c: 0 0 bg4 }
        }
    }

    // Guilds.
    +w('', 'wrapper-' 'guilds-', i: '') {
        /// Use theme colors.
        +w('', 'scroller-') {
            c: 0 0 bg3
            b: inset -1px 0 bg5 i

            /// Feat -> Hide 'Download Apps' button.
            if hide_dl_btn {
                +w('>', 'listItem-') {
                    &:nth-last-child(-1n+3) { display: none i }
                }
            }
        }

        /// Home item.
        +w('', 'listItem-' 'wrapper') {
            +w('', 'childWrapper-') { c: fg3 }
            +w('&', 'selected-') {
                +w('', 'childWrapper-') { c: white 0 ac2 }
            }
        }

        /// Feat -> Minimize guild area width.
        if (g_minimize) {
            @media screen and (max-width: g_minimize_w) {
                transition: 0.3s cubic-bezier(0, 0, 0.2, 1)
                max-width: 10px

                /// Expand hover region.
                overflow: unset i
                > * { z-index: 9 i }
                &::after {
                    P(0 -15px 0 0, 8)
                    // opacity: 0.5
                    // c: 0 0 ac1
                }

                /// Expand guilds area on hover.
                &:hover {
                    max-width: (g_icons_s + 20px)
                    transition-delay: 0.6s
                }
            }
        }

        /// Feat -> Smaller guild icons.
        if (g_icons) {
            $size = g_icons_s
            width: ($size + 20px)

            /// Mentions bar.
            +w('', 'nreadMentions' 'bar', i: '') { width: $size }

            /// Dividers.
            +w('', 'Separator-') {
                width: $size
                c: 0 0 bg5
            }

            /// DM icons.
            div[style*='height: 56px'] {
                margin-bottom: 8px
                height: $size i
            }

            /// Icons.
            +w('', 'listItem-') {
                padding-left: 10px
                justify-content: flex-start

                /// Unread indicators.
                +w('>', 'pill-') {
                    height: $size

                    /// Guild placeholder icon.
                    + div > [draggable = 'false'] svg {
                        width: $size i
                        height: $size i
                        div { c: 0 0 bg5 }
                    }
                }

                /// 1: Home icon.
                /// 2: Guild icons.
                +w('', 'listItemWrapper-' 'blobContainer-') {
                    +w('>', 'wrapper-') { width: $size; height: $size }
                    +w('', 'svg-') { width: $size; height: $size }
                    +w('', 'Badge-') {
                        r: 50% i
                        b: 0 0 0 3px bg3
                    }
                }

                /// Folder icons.
                > [draggable] {
                    --background-primary: bg5 // Folder placeholders.
                    +w('>', 'wrapper-') { &, ../ { width: $size; height: $size i }}
                    svg { width: $size; height: $size }
                    +w('', 'Badge-') {
                        r: 50% i
                        b: 0 0 0 3px bg3
                    }
                }

                /// Expanded folders.
                +a(expandedFolderBackground-, i: '/') {
                    width: $size
                    left: 10px i
                    r: 16px i

                    /// Add borders to expanded folders.
                    &:not([class*='collapsed']) { b: 0 0 0 2px bg4 }

                    /// Reset list height.
                    ~ [style*='height'] {
                        height: unset i
                        padding-bottom: 1px
                    }
                }
            }
        }

        /// Feat -> Compact mode.
        if (compact == 'guilds' || compact == 'both') {
            @media screen and (max-width: compact_w) {
                display: none i
                +w('+', 'base-') { left: 0px i }
            }
        }
    }

    // Sidebar.
    /// NOTE: Excludes user settings.
    :not([class*='Region']) {
        +w('>', 'sidebar-') {
            border-right: 1px solid bg5 i

            /// User status menu.
            +w('', 'panels-') {
                border-top: 1px solid bg5 i

                /// Popouts -> Status menu.
                +a(menu-, i: '/') { border: 1px solid bg5 i }
            }

            /// Main/friends area.
            +w('+', 'container-') {
                c: 0 0 bg1

                /// Header.
                +w('>', 'container-') {
                    c: 0 0 bg2
                    b: 0 1px bg5
                }

                /// 'Now playing' sidebar.
                +w('', 'nowPlaying') { b: inset 1px 0 bg5 i }
            }

            /// Guild notifications.
            +w('', 'bar-') {
                c: fg1 0 bg3
                b: inner, bsh i

                +w('&', 'mention-') {
                    c: white 0 ac1
                    b: bsh i
                }
            }

            /// Feat -> Small sidebar mode.
            if (sb_short) {
                @media screen and (max-width: sb_short_w) {
                    transition: 0.3s cubic-bezier(0, 0, 0.2, 1)
                    max-width: sb_short_s

                    /// Center user icon.
                    +w('', 'panels-' 'container-', i: 0) {
                        padding: 0 16px i
                    }

                    /// Expand on hover.
                    &:hover {
                        max-width: 240px
                        transition-delay: sb_short_d i
                    }

                    /// Remove extra stuff for channels.
                    +w('', 'wrapper-' 'content-') {
                        margin: 0
                        r: 0px
                        +w('', 'icon-' 'iconItem-') { display: none i }
                    }

                    /// Reset whitespace for category name.
                    +w('', 'containerDefault-' 'clickable-', i: 0) {
                        padding-left: 8px i
                        h2 { c: fg2 }
                    }

                    /// More compact bars.
                    +w('', 'unread-' 'bar-', i: '') {
                        margin: -8px -9px 0
                        padding: 8px
                        r: 0px
                        span { font-size: 10px i }
                    }
                }
            }

            /// Feat -> Compact mode.
            if (compact == 'sidebar' || compact == 'both') {
                @media screen and (max-width: compact_w) {
                    display: none i
                }
            }

            /// App -> Server discovery.
            +w('+', 'pageWrapper-') {
                c: 0 0 bg1
            }
        }
    }

    // Settings.
    +w('', 'SidebarView-') {
        +w('', 'sidebarRegion-') {
            /// -> Add userstyle version.
            nav > div:first-child::before {
                padding: 16px 0
                margin-bottom: 16px
                content: '🌚 ' var(--note)
                text-transform: initial
                font-weight: 500
                font-size: 16px
                display: block
                b: 0 1px bg5
                c: fg1
            }
        }

        /// 'ESC' button.
        +w('', 'closeButton-') {
            c: 0 bg5
            &:hover { c: 0 0 bg3 }
            svg path { v: fg2 }
            +w('+', 'keybind-') { c: fg2 }
        }

        /// My account.
        +w('', 'viewBody-') { c: fg1 }

        /// Remove bordes from 'my account' menu.
        +w('', 'menu-') { border: none i }

        /// -> Add border to content area.
        +w('', 'contentRegion-') {
            border-left: 1px solid bg5 i
        }

        /// 'Subscriptions' colors.
        [style^='color: rgb(114\, 137\, 218);'] {
            c: ac1
            &:hover { c: 0 0 ac4 }

            ../ [style*='-color: rgb(114\, 137\, 218)'] {
                c: white ac1 ac1
            }
        }

        /// 'Log Out' colors.
        [style^='color: rgb(240\, 71\, 71);'] {
            c: b10
            &:hover { c: 0 0 b15 }
        }
    }

    // Startup.
    +w('', 'ready-') {
        +w('+', 'text-') {
            /// Tip color.
            +w('', 'tipTitle-') { c: ac1 }

            /// Add theme version to loading screen.
            +w('>', 'contentBase-') {
                padding-top: 2rem i
                font-style: italic i
                c: fg3

                /// Theme version.
                &:before {
                    content: var(--note) i
                    text-transform: initial
                }
            }
        }
    }

    // Friends -> Active now.
    +w('', 'nowPlaying' 'outer-', i: 0) {
        /// Hover state.
        &:hover {
            c: 0 bg4 bg3
            +w('', 'inset-') { > section { c: 0 0 bg2 }}
        }

        /// Active state.
        +w('&', ' active-') {
            c: 0 bg5 bg4
            +w('', 'inset-') { > section { c: 0 0 bg3 }}
        }
    }

    // Modals.
    +w('', 'modal-') {
        /// Backdrop.
        +a(backdrop, i: '/') {
            c: 0 0 bg1
            opacity: 0.8 i
        }

        /// Global -> User info.
        +w('>', 'inner-' 'root-', i: 0) {
            border: 1px solid bg5
            r: rc
            b: var(--elevation-high) i

            /// Header.
            +w('>', 'topSection') {
                z-index: 1 i
                position: relative
                border-bottom: 1px solid bg5 i
                c: 0 0 bg3

                /// Account info.
                +w('', 'username-') { c: fg1 }
                +w('', 'discriminator-') { c: fg2 }

                /// Status colors.
                +w('>', 'headerFill-') { c: 0 0 bg4 }

                /// Activities.
                +w('', 'activity-') {
                    > * { c: fg0 }
                    +w('', 'Normal-' 'Name-' 'details-', 0) { c: fg0 } /// TODO: Fix this.
                    +w('', 'content-') { c: fg2 }
                }
            }

            /// Buttons.
            +w('', 'button') {
                transition: 0.2s ease
                &:not([class*='ActionsProfile-']) { c: white ac1 ac1 }
                &:hover { opacity: 0.8 i }
                > div { c: white }
            }

            /// Slider bar.
            +w('', 'timeBar') {
                +w('', 'bar-') { c: 0 0 fg5 }
                +w('', 'barInner-', i: 0) { c: 0 0 fg0 }
            }
            +w('', 'bar-') { + div > div[style] { c: fg0 }}

            /// States.
            +w('>', 'Xbox') {
                c: 0 0 b75
                +w('', 'headerFill-') { c: 0 0 b74 }
                +w('', 'colorBrand-') { c: 0 0 b70 }
            }
            +w('>', 'Playing') {
                c: 0 0 b55
                +w('', 'headerFill-') { c: 0 0 b54 }
                +w('', 'colorBrand-') { c: 0 0 b50 }
            }
            +w('>', 'Spotify') {
                c: 0 0 b45
                +w('', 'headerFill-') { c: 0 0 b44 }
                +w('', 'colorGreen-') { c: 0 0 b41 }
            }
            +w('>', 'Streaming') {
                c: 0 0 b65
                +w('', 'headerFill-') { c: 0 0 b64 }
                +w('', 'colorBrand-') { c: 0 0 b60 }
            }

            /// Tabs.
            +w('', 'tabBarContainer-') {
                c: 0 bg5 bg2
                [style*=': rgb(255'] { c: 0 ac1 }
                [style*='255\, 0.1'] { c: 0 bg5 }
                [style*='255\, 0.4'] { c: fg4 }

                /// Items.
                +w('', 'item-') {
                    c: fg4
                    &:hover { c: 0 bg4 }
                    +w('&', 'selected-') { c: fg1 ac1 }
                    &[style*='-color: rgb(255'] { c: fg1 ac1 }
                }
            }
        }

        /// Global -> Upload.
        +a(uploadModal-, i: '/') {
            border: 1px solid bg5 i
            b: var(--elevation-high) i
            c: 0 0 bg1
            r: rc
            /// -> Preview.
            +w('', 'icon-') {
                +w('&', 'image-') {
                    c: 0 0 bg3
                    b: inner, bsh i
                }
                +w('&', 'unknown-' 'code-' 'video-' 'document-') {
                    filter: invert(0.8) hue-rotate(180deg)
                }
            }
            /// -> Textarea.
            +w('', 'textAreaUpload-' 'scrollableContainer-', 0) {
                border: 1px solid bg5 i
                r: rc
            }
            /// -> Footer.
            +w('', 'footer-') {
                border-top: 1px solid bg5 i
                c: 0 0 bg2
                b: none i
                r: 0px 0px rc rc
            }
        }
        /// Global -> Quickswitcher.
        +a(quickswitcher-, i: '/') {
            &:not([class*='channel']) {
                border: 1px solid bg5
                b: var(--elevation-high) i
                r: rc
            }
            /// -> Protip.
            +w('', 'protip-') {
                > h3 { c: b40 }
                > div {
                    transition: opacity 0.2s ease i
                    ../:hover > div { opacity: 1 i }
                }
            }
        }
        /// Global -> Keyboard combos.
        +a(keyboardShortcutsModal, i: '/') {
            border: 1px solid bg5 i
            c: 0 0 bg1
            r: rc
            h1 {
                c: fg1 0 bg3
                margin-bottom: 0
                + div { c: fg3 bg5 bg3 }
            }
            +w('', 'Description') { c: fg3 }
            +w('', 'ddrArrows-') { filter: invert(0.8) hue-rotate(180deg) }
        }

        /// Guilds -> Folder settings / Channel info / Gift a Nitro.
        +a(root-1gCeng, i: '/') {
            --background-floating: bg1
            border: 1px solid bg5 i
            b: var(--elevation-high) i
            c: 0 0 bg1

            /// 'Delete message'.
            +w('', 'colorStandard-') {
                +w('+', 'message-') {
                    c: 0 0 bg2
                    b: inner
                    r: rc

                    /// Fix mentions.
                    .mention { c: ac0 0 bg3 }
                }
            }

            /// Footer.
            +w('', 'footer-') {
                b: inset 0 1px 0 bg5
                c: 0 0 bg2
            }
        }

        /// Inbox -> Fix borders.
        +a(recentMentionsPopout-, i: '/') {
            border: 1px solid bg5 i
            b: var(--elevation-high) i

            /// Header.
            +w('>', 'header-') {
                c: 0 0 bg3
                b: inset 0 -1px bg5 i
            }
        }

        /// Change avatar -> Zoom in/out slider.
        +a(slider-, i: '/') {
            +w('', 'bar-') { c: 0 0 bg4 }
            +w('', 'Fill-') { c: 0 0 ac1 }
            +w('', 'grabber-') { c: 0 fg1 fg1 }
            +w('', 'markDash-') { c: 0 0 bg4 }
            +w('', 'markValue-') { c: fg3 }
            +w('', 'defaultValue-' 'Value-') { c: ac1 }
        }
    }

    // Buttons.
    +w('', 'button-') {
        +w('&', 'lookLink-') {
            c: fg3
            transition: 0.2s ease
            &:hover {
                c: fg0
                --g: 0deg, t, t 1px, currentColor 0, currentColor 2px, t 0
                +w('>', 'contents-') { background: linear-gradient(var(--g)) i }
            }
            +w('&', 'colorBrand-') { c: ac1 }
        }

        +w('&', 'lookFilled-') {
            transition: 0.2s ease
            &:hover { opacity: 0.8 }
            +w('&', 'colorRed-') { c: white 0 b13 }
            +w('&', 'colorBrand-') { c: white 0 ac2 }
            +w('&', 'colorGreen-') { c: white 0 b43 }
            +w('&', 'colorPrimary-') { c: fg1 0 bg4 }
            +w('&', 'colorGrey-') { c: fg1 0 bg4 }
            +w('', 'contents-') { text-shadow: 1px 1px 0 #0005 }
        }

        +w('&', 'lookOutlined-') {
            +w('&', 'colorRed-') { c: b10 b13 }
            +w('&', 'colorGreen-') { c: b40 b43 }
            +w('&', 'colorBrand-') { c: ac1 ac1 }
            +w('&', 'colorWhite-') { c: fg1 fg1 }
        }

        +w('&', 'lookBlank-') {
            /// Chat -> Emoji picker tab.
            +w('&', 'colorBrand-') { c: fg5 }
            +w('&', 'colorBrand-' 'Active-', i: '') { c: fg1 0 bg1 }
        }

        /// Inlined.
        +a(item-, i: '/') {
            &[style*='d-color: rgb(67\, 181\, 129'] { c: white 0 ac3 }
            &[style*='d-color: rgba(67\, 181\, 129\, 0.2'] { c: ac1 0 ac4 }
        }
    }

    // Popouts -> User popout.
    +w('', 'userPopout-') {
        --background-floating: bg1
        border: 1px solid bg5 i
        b: var(--elevation-high) i
        c: 0 0 bg1

        /// Header.
        +w('>', 'header') {
            /// Username.
            +w('', 'headerTag') {
                c: fg3
                +w('', 'username-') { c: fg0 }
            }

            /// Status.
            +w('', 'customStatus-') { c: fg0 }

            /// Activities.
            +w('', 'activity-') {
                > * { c: fg0 }
                +w('', 'Normal-' 'Name-' 'details-') { c: fg0 }
                +w('', 'content-') { c: fg2 }
            }

            /// Slider bar.
            +w('', 'timeBar') {
                +w('', 'bar-') { c: 0 0 fg5 }
                +w('', 'barInner-', i: 0) { c: 0 0 fg0 }
            }
            +w('', 'bar-') { + div > div[style] { c: fg0 }}

            /// Status colors.
            +w('&', 'Xbox') {
                c: 0 0 b75
                +w('>', 'activity-') { c: 0 0 b74 }
            }
            +w('&', 'Playing') {
                c: 0 0 b55
                +w('>', 'activity-') { c: 0 0 b54 }
            }
            +w('&', 'Spotify') {
                c: 0 0 b45
                +w('>', 'activity-') { c: 0 0 b44 }
            }
            +w('&', 'Streaming') {
                c: 0 0 b65
                +w('>', 'activity-') { c: 0 0 b64 }
            }
        }

        /// Body.
        +w('', 'body-') {
            c: fg1 0 t
            +w('', 'bodyTitle-') { c: fg3 }
        }

        /// Footer.
        +w('', 'footer-') {
            c: 0 bg5 t
            input { c: fg1 bg5 bg2 }

            +w('', 'protip-') {
                c: fg
                [style] { c: b40 }
            }
        }
    }

    // Popouts -> Search menu.
    #search-results {
        /// Exclude results.
        &:not([role='list']) {
            c: 0 0 bg0
            b: inner, bsh i
        }

        /// Header.
        +w('>', 'queryContainer-') {
            c: fg1 bg2 t
            strong { c: ac }
        }

        /// Items.
        +w('', 'header-' 'answer-') { c: fg4 }
        +w('', 'anchor-' 'displayUsername-') { c: fg5 }
        +w('', 'filter-' 'nonText-' 'displayedNick-') { c: fg1 }
        +w('', 'anchorUnderline') { c: ac0 }
        +w('', 'option-') { c: fg3 }
        +w('', 'selected-') { c: 0 0 bg3 }
        +w('', 'option-') { &::after { background: none i }}

        /// Search field.
        +a(searchFilter-, i: '/') { c: fg0 0 bg1 }
        +a(searchAnswer-, i: '/') { c: fg0 0 bg1 }

        /// Results.
        +w('', 'channelSeparator-') { c: 0 0 bg2 }
        +w('', 'embedAuthorName-') { c: fg1 }
        +w('', 'embedTitle-') { c: ac1 }
        code.inline { c: fg1 }

        /// Fix width for videos. @upstream
        @supports(scrollbar-width: thin) {
            +w('', 'cozy-') {
                margin-left: 0px
                padding-left: 16px

                /// Reduce size of avatars.
                +w('', 'avatar-') {
                    top: 2px
                    left: 0px
                    width: 16px
                    height: @width
                    position: relative

                    + h2 { margin: -20px 0 4px 24px }
                }

                /// Reset the embed.
                +w('>', 'container-') {
                    +w('', 'embedFull-') {
                        width: 100% i
                        max-width: 100% i
                        > div > div[style] { width: 100% i }
                    }
                }
            }
        }
    }

    // Popouts -> Attach menu.
    +w('', 'attachPopout-') {
        border: 1px solid bg5

        /// Spotify invite.
        +a(modal-yWgWj-, i: '/') {
            border: 1px solid bg5 i
            c: 0 0 bg1
            b: var(--elevation-high) i

            /// Footer.
            +w('', 'footer-') {
                border-top: 1px solid bg5
                c: 0 0 bg2
            }

            /// Invite.
            +w('', 'header-') { c: fg4 }
            +w('', 'subHeader-') { c: fg5 }
            +w('', 'name-' 'textLink-' 'Status-') { c: fg1 }
            +w('', 'preview-') { c: 0 bg5 bg3 }
        }
    }

    // Chat -> Base.
    +w('', 'chat-') {
        /// -> Header.
        +w('>', 'title-') {
            c: 0 0 bg2
            /// -> Gradient.
            +a(children-, i: '/') {
                &::after { background: linear-gradient(90deg, t 0, bg2) i }
            }
        }

        /// -> Chat area.
        +w('', 'content-') {
            c: 0 0 t

            --background-message-hover: to_rgba('bg-3', 0.3)

            /// -> 'New messagges' bar.
            +w('', 'isUnread-' 'divider-', i: '') {
                c: 0 ac1
                svg path { v: ac1 ac1 }
                +w('', 'content-') { c: ac1 }
                +w('', 'unreadPill-') { c: white 0 ac1 }
            }

            /// -> Dividers.
            +w('', 'divider-' 'content-', i: 0) {
                c: 0 0 var(--background-primary)
            }

            /// -> 'Has more' bar.
            +w('', 'hasMore-') {
                c: ac1 bg5 bg2
                transition: 0.2s ease
                &:hover { opacity: 0.6 }
            }
            /// -> Welcome -> Border color.
            +w('', 'base-19D3Qq') { c: 0 bg5 }
            /// -> Guild invites.
            +w('', 'userSelectNone-') {
                +w('&', 'cursorDefault-') {
                    margin-top: 1rem
                    r: rc
                    c: 0 0 bg2
                    b: inner
                }
            }
            /// -> Embedded links/media.
            +w('', 'embedWrapper-') {
                &:not([class*='imageZoom-']) {
                    r: rc

                    /// Exclude embeds with custom border colors.
                    &:not([style*='border-color']) { c: 0 bg5 }

                    /// Remove double borders from some elements.
                    &:not([class*='Audio']) { b: inner }
                }
            }
            /// -> Mentioned.
            +w('', 'mentioned-') {
                r: (chat_short) ? 4px i : 0px i
                --text-muted: var(--fg-3)

                /// Bar color.
                &::before {
                    c: 0 0 ac1

                    /// Tweaks for short chat mode.
                    if (chat_short) {
                        width: 4px
                        r: 4px 0px 0px 4px
                    }
                }

                /// Reaction colors.
                +w('', 'reactionMe-') { c: 0 0 #ffffff20 }
            }
            /// -> Spoilers.
            +w('', 'spoilerText-') {
                r: 8px
                c: 0 0 bg3
                &[data-slate-object] { c: 0 0 bg5 }
                +w('&', 'hidden-') { &:hover { c: 0 0 bg4 }}
            }

            /// -> Attachments.
            +w('', 'attachment-') {
                b: none i

                /// Invert document/text/code/zip icons.
                if (dark(BG)) {
                    /[src *= '/assets/985ea67d2edab4424'],
                    /[src *= '/assets/9f358f46647358641'],
                    /[src *= '/assets/481aa700fab464f23'],
                    /[src *= '/assets/73d212e3701483c36'] {
                        filter: invert(0.8) hue-rotate(180deg)
                    }
                }
            }

            /// -> Reactions.
            +w('', 'reactionMe-') {
                c: 0 t ac4
                +w('', 'Count-') {
                    font-weight: bold
                    c: ac0
                }
            }
        }

        /// -> 'Jump to present' bar.
        +w('', 'jumpToPresentBar-') {
            > button {
                c: fg3
                transition: 0.2s ease
                ../:hover button { c: fg1 }
            }
        }

        /// Textarea.
        +w('', 'channelTextArea-') {
            r: rc i

            /// Input borders.
            > div {
                &:nth-of-type(1) {
                    border: 1px solid bg5
                    r: rc

                    /// Reset reply state.
                    +w('&', 'container-') { r: rc rc 0 0 }
                }
                &:nth-of-type(2) {
                    /// Reset reply state.
                    +w('&', 'hasReply-') {
                        border: 1px solid bg5
                        border-top: none
                        r: 0 0 rc rc
                    }
                }
            }

            /// Fix mention button colors.
            +w('/', 'mentionButton-' 'colorBrand-', i: '') {
                c: ac0
            }

            /// Fix emoji button padding.
            +w('', 'emojiButton-') { padding-right: 10px i }

            /// Edit message footer.
            +w('+', 'operations-') {
                c: fg3
                a { c: ac2 }
            }

            /// Markdown preview -> Mentions.
            /.mention { c: ac0 0 ac5 }

            /// Markdown preview -> Inline code.
            +a(inlineCode-, i: '/') { font-family: var(--f-mono) i }
        }

        +w('', 'cooldownWrapper-') { c: fg3 }
        +w('', 'newMessagesBar-') {
            c: 0 0 bg5
            b: bsh i
            > button { c: fg1 }
        }

        /// Message context menu.
        +w(' ', 'buttonContainer-' 'buttons-' 'wrapper-', i: 0) {
            c: 0 0 bg2
            b: outer, bsh i

            /// Menu items.
            +a(item-, i: '/') {
                +w('&', 'colorDefault-') {
                    +w('&', 'focused-') { c: ac0 0 ac5 }
                }
                /// 'Delete Message' link.
                +w('&', 'colorDanger-') {
                    &, [class *= 'hint'] { c: b10 }
                    +w('&', 'focused-') { c: b10 0 b15 }
                }
                /// 'Invite people' link.
                +w('&', 'colorBrand-') {
                    &, [class *= 'hint'] { c: b60 }
                    +w('&', 'focused-') { c: b60 0 b65 }
                }
            }
        }

        /// -> Guild members.
        +a(members-, i: '/') {
            b: inset 1px 0 bg5 i
            +w('', 'clickable-') {
                &:hover [class *= 'layout-'] { c: 0 0 bg3 }
            }
            +w('', 'selected-') { c: 0 0 bg4 }
        }

        /// -> Search results.
        +w('', 'ResultsWrap-') {
            b: inset 1px 0 bg5 i

            /// Header.
            +w('', 'searchHeader-') {
                border: 1px solid bg5
                border-right: none
                c: 0 0 bg3
            }

            /// Pagination.
            +w('', 'pageControl-') {
                +w('', 'activeButton-') { c: white 0 ac1 }
            }
        }

        /// -> Hovered message.
        +w('', 'message-') {
            r: rc
        }

        /// Chat -> Bot tag colors.
        +a(botTagRegular-, i: '/') { c: white 0 ac1 }
    }

    // Chat -> Markup.
    +w('', 'markup-') {
        /// -> Reset code font and border color.
        code {
            c: 0 bg5
            &.inline {
                padding: 0.125em 0.2em
                b: inner, bsh i
            }
        }

        /// Syntax highlighting.
        /.hljs {
            r: rc i
            &-comment, &-quote { c: fg3 }
            &-built_in, &-deletion { c: b10 }
            &-addition, &-keyword, &-selector-tag { c: b40 }
            &-name, &-section, &-title, &-selector-class, &-selector-id { c: b60 }
            &-doctag, &-literal, &-meta &-meta-string, &-number, &-regexp, &-string { c: b50 }
            &-attr, &-attribute, &-type, &-class &-title, &-template-variable, &-variable { c: b20 }
        }

        /// Feat -> Code font.
        +w('', 'Code-' 'codeBlockText-' 'codeLine-', i: '+') {
            ../ code, /& { font-family: var(--f-mono) i }
        }
    }

    // Chat -> Autocomplete. @obsolete
    +w('', 'autocomplete-' 'autocomplete', i: '') {
        c: 0 0 bg2
        r: rc i
        +w('', 'Title-') {
            c: fg5
            > strong { c: ac1 }
        }
        +w('', 'content-') { c: fg1 }
        +w('', 'description') { c: fg4 }
        +w('', 'divider-') { c: 0 0 bg5 }
        +w('', 'Selected-' 'selected-') { c: 0 0 bg3 }
    }

    // Feat -> Shorter messages.
    if (chat_short) {
        chat_width = chat_short_w
        +w('', 'messagesWrapper-') {
            /// -> Messages.
            +w('', 'scroller-') {
                padding-left: 12px
                > div {
                    width: 100%
                    max-width: chat_width
                    margin-left: auto
                    margin-right: auto
                    box-sizing: border-box
                }
            }
            /// -> Bars.
            +w('>', 'barBase-') {
                margin-left: auto
                margin-right: auto
                max-width: chat_width
            }
            /// -> Textarea.
            + form div {
                +w('&', 'channelTextArea-') {
                    /// Textarea in DMs/Guilds/Annoncements.
                    &, ../[aria-expanded], ../[class *= 'wrapper-'] {
                        max-width: chat_width
                        margin-right: auto
                        margin-left: auto
                    }
                }
                +w('&', 'typing-') {
                    max-width: chat_width
                    margin-right: auto
                    margin-left: auto
                }
            }

            /// Fix 'Messages failed to load' alert.
            +a(messagesErrorBar-, i: '/') {
                c: 0 0 b15
                +w('>', 'Button') { c: b10 }
            }
        }
    }

    // Emojis.
    .emoji {
        /// Feat -> Reduce emote size.
        &.jumboable {
            width: var(--e-size)
            min-height: @width
            height: @width
        }

        /// Feat -> Larger reaction emotes.
        if (e_reaction) {
            /[class*='reactions-'] {
                margin-top: 0.25rem
                .emoji {
                    height: 1.5rem
                    width: @height
                }

                /// Whitespace for emote menu.
                +w('', 'reactionBtn-' 'focusable-', i: '') { margin-left: 0.25rem }
            }
        }

        /// Drawers -> Emoji picker.
        +a(drawerSizingWrapper-, i: '/') {
            /// -> Wrapper.
            +w('>', 'contentWrapper') {
                border: 1px solid bg5
                b: var(--elevation-high) i
                r: rc

                /// Fix background for emoji category text.
                +w('', 'categorySection-' 'header-') { c: 0 0 bg2 }
            }

            /// Chat -> Reacting to messages.
            +a(emojiPicker-, i: '/') {
                box-shadow: 0 0 0 1px bg5

                /// Fix background for emoji category text.
                +w('', 'categorySection-' 'header-') { c: 0 0 bg2 }
            }

            /// -> Rounded corners.
            +w('', 'categoryList-') {
                r: 0px 0px 0px rc
            }
        }

        /// -> Fix hardcoded preload images.
        +a(imageLoading-, i: '/') {
            background-image: none i
            c: t 0 bg3
            r: 38%
        }
    }

    /// Feat -> Avatar size in info popout/modal.
    if (avatar_size > 80) {
        /// Modal.
        +w('', 'modal-' 'header-', i: 0) {
            div[style*='width: 80px'] {
                width: var(--avatar-s) i
                height: var(--avatar-s) i
            }
            /// Fix width.
            svg[width='92'] {
                width: calc(var(--avatar-s) + 12px) i
            }
        }
    }

    /// Feat -> Enable avatar context menu in profiles.
    if (avatar_c_m) {
        +w('', 'avatar-') {
            img { text-indent: unset }
            * { pointer-events: unset }
        }
    }

    /// @upstream
    @supports(scrollbar-width: thin) {
        /// Fix audio/video volume bar position.
        +w('', 'audioVolumeWrapper-') { transform: translate(26px, -4px) i }
        +w('', 'videoVolumeWrapper') { transform: translate(-2px, -12px) i }

        /// Search -> Fix media width.
        +w('', 'embedMedia-') { [data-fullscreen] { width: 100% i }}
    }

    /// Feat -> Move user menu to guilds bar.
    if guild_avatar {
        +w('', 'guilds-') {
            // max-height: calc(100vh - 72px)
            padding-bottom: 144px
        }
        +w('', 'sidebar-') {
            /// The magic that makes this feature work.
            &, /[class*='guilds'] + div { overflow: unset i }

            /// Attach panel to guilds bar.
            +w('', 'panels') {
                +w('>', 'container-') {
                    --size: (g_icons) ? (g_icons_s + 20px) : 72px
                    padding: 8px 0
                    z-index: 111
                    height: 128px
                    width: calc(var(--size))
                    left: calc(-1 * var(--size))
                    bottom: 0px
                    overflow: hidden
                    position: absolute
                    flex-direction: column-reverse
                    b: inset -1px 0 bg5
                    c: 0 0 bg3

                    /// Adjust buttons.
                    +w('>', 'horizontal-') { flex-direction: column i }
                }
            }

            /// Remove status.
            +w('', 'subtext-') { display: none }
            +w('', 'nameTag-') { display: none }

            /// Center elements.
            +w('', 'avatarWrapper-') {
                margin-right: 0px
                margin-top: 4px
            }
        }
    }
}