pxvmc/src/winclassic.scss

@use "colors";
@use "images";

.theme-dark {
  --wc-frame: inset -1px -1px 0 0 #{colors.$tertiary},
    inset 1px 1px 0 0 #{colors.$primary},
    inset -2px -2px 0 0 #{colors.$secondary}, inset 2px 2px 0 0 #{colors.$c8};

  --wc-outer-edge: inset -1px -1px 0 0 #{colors.$tertiary},
    inset 1px 1px 0 0 #{colors.$c8}, inset -2px -2px 0 0 #{colors.$secondary},
    inset 2px 2px 0 0 #{colors.$primary} !important;

  --wc-inner-edge: inset -1px -1px 0 0 #{colors.$c8},
    inset 1px 1px 0 0 #{colors.$secondary},
    inset -2px -2px 0 0 #{colors.$primary},
    inset 2px 2px 0 0 #{colors.$tertiary};

  --wc-rebar: inset 1px 1px 0 0 #{colors.$secondary},
    inset 2px 2px 0 0 #{colors.$c8}, inset -1px -1px 0 0 #{colors.$c8},
    inset -2px -2px 0 0 #{colors.$secondary};
}
.theme-light {
  --wc-frame: inset -1px -1px 0 0 #{colors.$c8},
    inset 1px 1px 0 0 #{colors.$primary},
    inset -2px -2px 0 0 #{colors.$tertiary},
    inset 2px 2px 0 0 #{colors.$secondary};

  --wc-outer-edge: inset -1px -1px 0 0 #{colors.$c8},
    inset 1px 1px 0 0 #{colors.$secondary},
    inset -2px -2px 0 0 #{colors.$primary},
    inset 2px 2px 0 0 #{colors.$tertiary};

  --wc-inner-edge: inset -1px -1px 0 0 #{colors.$secondary},
    inset 1px 1px 0 0 #{colors.$tertiary},
    inset -2px -2px 0 0 #{colors.$primary}, inset 2px 2px 0 0 #{colors.$c8};

  --wc-rebar: inset 1px 1px 0 0 #{colors.$secondary},
    inset 2px 2px 0 0 #{colors.$c8}, inset -1px -1px 0 0 #{colors.$c8},
    inset -2px -2px 0 0 #{colors.$secondary};
}

.theme-dark {
  --ThreeDLightShadow: #1a1a1a;
  --ThreeDHighlight: #383838;
  --ThreeDFace: #1a1a1a;
  --ThreeDShadow: #171717;
  --ThreeDDarkShadow: #141414;
  --Window: #1a1a1a;
  --WindowText: #dedbeb;
  --ActiveTitleStart: #2a2331;
  --ActiveTitleEnd: #634e75;
  --ActiveTitleText: #edebf7;
  --InactiveTitleStart: #171717;
  --InactiveTitleEnd: #171717;
  --InactiveTitleText: #383838;
  --Selection: #634e75;
  --SelectionText: #edebf7;
  --Tooltip: #1a1a1a;
  --TooltipText: #dedbeb;
  --Scrollbar: #383838;
}
:root {
  --ImageDither: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAPSURBVBhXY4CC/1CCgQEADwMB/wK6BPYAAAAASUVORK5CYIIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==");
  --ImageFolderClosed: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAE3SURBVFhH7VJBEoIwDOTIf/iTf+JPPMYjMx5qg42uS0KhFHFGO7OTzTZN1mDzdafvm5BD27Yhldc90nwcxxBCv4hDTKwdrqhqQpqF29UctIQqJqTJMFyKIe9LkMa/Vv9pxNEPE2rAWnExBodDLtubPt8uA9qcI99zHqMY6Lq4hUM2IMDhwslMfQPw60ydtHIDPMgawDDeHL8BjoqUbzfAjTwNgffCNY9x3wa4sacxh3y9AW6Qg9azCcrLP4EVWUOgBrV5A1azNdB3MOzJIS//BNDEjDmeUPYnxGaWrgNyPEbbABVt0hCiIwxt/waUa1PmWIdImm8AimYa516NcIVzNzeARQjj8ezOqsE7A8ufQIowWpxrUMOc7xP8DXD0NE8XzrpqkL8ZkOQMTAbkCDkD0/D/+fHTNHfV1QBuqTnkzQAAAABJRU5ErkJggg==");
  --ImageFolderClosedOverlay: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAEZSURBVFhH7VKBDcIwDNsBXMITvMWdPATzJE/GJLRrV4YEkaw4bpqajOkb41qB+4whgeGIUwFDTNQ+TuxqYuvjxC4mMOTSAdxvwRpPxQdj3RwNRCtuxTnhWmN7i4keAxzm2c+9RoaB24whGwD0cXA3s7sB/XWR7lqzAX8oesAR3Rm+Ac8E680GfFCmKfQcnDVy1wZ8cKY517ragA8ogf1uwuvmTxBl1xSqaW/RQDSsBrynj5Fr3fwJdEiUS5xo+hPqsEjn8BJHDg140xZNAV0Rad0bIOdA59qnoJYa0CbXvM56wIns7MWANimiy34W9ehZhLefAA2aI+49qmnt50S6Ac+ZlungrlPT+skAiiOwGECAHIF//HxM0wMCXoMpXQz00wAAAABJRU5ErkJggg==");
  --ImageFolderOpen: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAFFSURBVFhH7ZJREoMwCEQ9bc/Ra3gnD+SflcrWDQKamtofmXkTRMKuid0dWfR9N+2hre1Dho/jmDIMj9+YgPg09bs0N1EjDpqZOCw+bHOYOIpKliEvar+ekb1HmeW2JnYNOF9e5BU1PYXSxNkT+MCitqZrnQEeuJdnNVoLA/JwBfKjvk2wAUnwY/waEYSRwsDnyM6CIw5yiJ43gOF2jd5r/r0BK5Dh9WpNhNucgIeIQJxXyl0DElUmPBF+b2smfz4X4ToDnohFehJhAOHcAG/OiPq4bnJcQ90JMBgYiTBSN/2uAYnURCRgYTHeY+r4D5QlCgO82cLDshU51xX6+sAAwwOw2pqXW6gH16AssTGATUfgXha0NUUM0DWs4Z4ChtnVy73nALqGNd4GpIGHY41q9lly7gsIDVzJLFka0MCLK7jj39F1L3Q+/18vALefAAAAAElFTkSuQmCC");
  --ImageFolderOpenOverlay: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAEqSURBVFhH7VLbDcJADOsATMISrMUUrAy1hCWfm6R39MFPLVlJc2ns5jpdWMGzg4ehZ/hj5iEmOPTWwd1NjIiTu5noFb8HOU30MgQPOHyUI3h/Y4M1A9GXaz5Sg9bCxNYNkCrqNcYhAzpwLa9qGhsDeDiD+FEh3hhAchYgSCONAa5sK7niLKfoZgMc6DE7Z/6zAReoGPWyBuFdNhARIhTSqHloABgxEYnoudc8f82E8JCBSMSJnkqYpHBpQF+umPVp3XNew9AGlByYiShR9/7QAFCZyAScKqbveJ3/QWpAX3bqsCoy1zrJr+/agA5g9FqUO7WH11AaYHMPtVcFvUbCAK+hQbQFDvMY5dFzRl5DAxRxqMMZs5o/I9e+jKmBM7kwAKB4Fi/8G9P0AdexoBVUhbn6AAAAAElFTkSuQmCC");
  --ImageHome: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAE2SURBVFhH1ZaJDYMwDEUzbUdhB3bKTqnt5BdwXMjhSO2XLHOYvNdIoIa/zv4KqRxesoeQUHRqzkyH4SntJoDBKbyk6NRfAHCpWP/KpQIXeBHQEssENDzuGa4llghYcLqcz5WEu8A3eIzxq4SbwB2c8yTBnWosT3DkTqJUf1rhyINEX3rhiIvEKDzPT0rMwtGHJLzg6F0S3nD0Hglc/NQsHB0SRtXZtk0e8IKjY01C2GCEBZ7TBtXdSaANZnUHgXaY1ScFjsX4jbGKHpf7OXWfELguxjA5Pr1WeLVyajhnUKBeTAQUnP6BFAEbzn1AwF6sEiD4ISATZl+zAwWOL6c1j+6/Ayc4X6PH5b6eR/fdAQU/BGw4d98dUPBDQCbM3izAg3fFMA2HgDV/Lp4R0E0wtLJ+KSG8AZmedDr25ZPhAAAAAElFTkSuQmCC");
  --ImageUnread: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACESURBVDhPtZBRCsAgDEM9vefyZpupBtpY9WPsQRjM5bWzZNRaH5/+CrnDgtJao2Qv0uIojSdxokg2FWXGk0r2a8cNSK/wbvLyjbDFaTqTAYFt8YsAeEnGJwHvwARAJfoLKmE5CFAiJ8Eynagkw5cXwcQ+UFhETmVjHi65FhUWfOaRo5QXtxdbQzKnh2UAAAAASUVORK5CYIIAAAAAAAAAAAAAAAAAAAAAAA==");
  --ImagePing: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACASURBVDhPzZBBCsAwCAR9ek95V3+WqmRhNWJoTx0YCprdhkjFJTJZHZlnENDTwVvVNaypglkqipRhhuZlyZsCUyNzjGHf5upM2oVbfCkwrcBv8eOCRrxB/5BM2iEcCqyVDwVovv0dlCVJDm8FCz+AAETQ7MLOWm4egxkE2LUiRB7pcKIEGXR8dgAAAABJRU5ErkJgggAAAAAAAAAAAAAAAAAAAAAAAAAAAA==");
  --ImageMonitor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABgSURBVDhP7ZIxCsAwDAPzdD/NP2sRkVoXHOMM2XqgRaBzhoyImV074WyCwt1bARRMicZdwgteAWBRBvyCk4IuqWA3zzigspsaXAH4oauLKXqixop6ypZ8RlkoqCWNkDFu9ufFFlUhU60AAAAASUVORK5CYIIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==");
  --ImageSpeaker: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACfSURBVDhPlZABDsQgCAR9uj+rP/M64Hqk0tObhCjKLmjZ0Ef8z3WVXms1g7Geg7h3795as/CbAySmK4EYsimWM4nhTqcYYrHMR+rCKI7jCwleuvZQ/J2AEItQqLMbrBOwwqEBuOC+ksjy+IQYnNn7SZ4TEELFb1hx/Ejy7BN3TBP2mcGJ0XwSIaJQdyNNMRNWpiAywbHJrvAXZuDbjFI+9M9SwlE3nTsAAAAASUVORK5CYII=");
  --ImageCamera: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAB0SURBVDhP7ZHZDYAwDEMzekbrZhDnADcgVPGJeJJxyNUi5EdEVbcM34EFtaTiJ/kQgySw0J0ZY3geDuWC6bD6hKmRxfnqhYOci0f6RbysFgC8Z0+AIjffiW9LceDXskQfstLhbYjjtT8AWes51Kjiir6DyA4C/PHAro/o3gAAAABJRU5ErkJgggAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==");
  --ImageDiscovery: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAI1SURBVFhHrVQLdsQgEMrRc7S92RZw0NFoPpuOjxKdD8S03Z7Evu/fK0Tp/0YWcHw+n++GZd52/SxsvI0r0XNx3obxQ2Rhxi1RQ6LfgR/E8q05fCVqWBQzehPM3YiZuAbPhDWYYj5biZMJ9pzEb+KD6FTcTLB3EhT3Nb8WJ6su9lXcYG4Ivz3qSzPxRty9o7jOhBZ+ewfmHAepEecrUXPukSh74rzLCSXyt0c9CtAgjmJjFDPXHLgKRD7E/Vn9mSFLFPH++tHQsQfG2cjMcWlg7M/EuVQjFAO+/iYaPIoteav/qgmdywQQBjtxMwrRH2/PRrOSeL5hwqJFoPz5FhMhgjUVPxggIqEGFcxFzRZ2v7n0FxNLcc0ns5CNOPAwRyt+KG5WfczgqvMAnlcDOGjDyjiyVm3qTeSbM3fiZopwcYbZkAk8LMW5VBziAb99qS4xFQfXW+A6iBPYMPBYuVtdUzNQqlnfeGrCBro5ifngwHa90oDxBpbizF3eAAMHDGz7xcKRA3d+B+6JM3iolvsm9BmSiam4DUSP4P1ooDTGYsGKE2ziTFw1MxOdAQYTFrliNUNI/25jb1ELAjREA50J1x8CyXoLM1EzoQEcahNkn7dfUkY14XztnwWSpyYMDcjiR84meEgD1cRpWGQUJeqAc3H30wQPZQT83ESGmk5EKwOph4JMvjOh4gvRA9xTvj8egKefoxaNw++iicxMOHcnXAzMhDJybR/NxHMDOdy4wlWk2m37A2epol0QLuNCAAAAAElFTkSuQmCC");
  --ImageAdd: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAC2SURBVFhH7ZBRCsQwCET9WPbcuXmbSTNFFhuTBUsLPngYiNFpJXkVpZTNsl7BeLDMol7dG+C7fU75B9TfiCMDZIDwABwy0gtwJXrakhFonEEHmGE5gF7gKUXOeiUDoPazzWoADGcdGRIAg1k9lwJ4AgzlcqvHso7XZxs2jgT6y2feUDeABx4DLtcBOHzGY9of4PHjAxydQWSADMAlv9YrfQ6lLbO8K0CDyyx7SyzWYtpbkrcgsgMiLydccAQrWQAAAABJRU5ErkJggg==");
}

.theme-light {
  --ImageScrollbarUp: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAlSURBVDhPYxgFQwD8h9JkAZBmGCYZIGsm2RBsmmF4FAxCwMAAAOXFD/HsWbUtAAAAAElFTkSuQmCCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==");
  --ImageScrollbarDown: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAhSURBVDhPYxgFgxT8x4OJBhRphgGKNMMARZpHAX0AAwMA9PwP8Zz9lFEAAAAASUVORK5CYIIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==");
}

.theme-dark {
  --ImageScrollbarUp: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAtSURBVDhPYxgFgx38BwIok3QA0gwDUCHiAVQfCoBKEQZQ9VgBVMkoGGSAgQEA6rE/waVrXDQAAAAASUVORK5CYIIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==");
  --ImageScrollbarDown: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAqSURBVDhPYxgFgxH8xwOgSggDqHoUAJUiHkD1gQFUiHRAkeZRQDfAwAAAJ5w/wWcDfNoAAAAASUVORK5CYIIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==");
}

[class*="button_"][class*="lookFilled_"],
section[class^="panels_"]
  [class^="container_"]
  [class^="flex_"]
  button[class^="button_"],
[class^="toolbar_"] [class*="iconWrapper_"] {
  border-radius: 0;
  box-shadow: var(--wc-outer-edge) !important;
}
[class*="button_"][class*="lookFilled_"]:active,
section[class^="panels_"]
  [class^="container_"]
  [class^="flex_"]
  button[class^="button_"]:active {
  box-shadow: var(--wc-inner-edge) !important;
}
[class*="button_"][class*="lookFilled_"]:not([class*="color"]),
[class^="toolbar_"] [class*="iconWrapper_"],
section[class^="panels_"]
  [class^="container_"]
  [class^="flex_"]
  button[class^="button_"] {
  background-color: var(--background-primary);
}

[class^="chat_"] > [class^="content_"] [class^="membersWrap_"] {
  padding: 2px;
  box-shadow: var(--wc-inner-edge);
  height: calc(100% - 4px);
  max-height: calc(100% - 4px);
}
[class^="messagesWrapper_"],
/*[class*="guilds_"],*/
[class^="sidebar_"] > nav > [class^="scroller_"] {
  padding: 2px;
  box-shadow: var(--wc-inner-edge);
}
[class^="chat_"] > [class^="content_"] > [class^="container_"],
[class^="chat_"] > [class^="content_"] > [class^="chatContent_"],
[class^="standardSidebarView_"] > [class^="contentRegion_"] {
  margin-left: 4px;
}

[class^="channelTextArea_"] > [class^="scrollableContainer_"],
[class^="chat_"]
  [class^="toolbar_"]
  > [class^="search_"]
  > [class^="search_"]
  > [class^="searchBar_"] {
  box-shadow: var(--wc-inner-edge);
  border-radius: 0;
}
[class^="channelTextArea_"] > [class^="scrollableContainer_"] {
  min-height: 42px !important;
}

[class^="chat_"] > [class^="content_"]:before {
  display: none !important;
}
[class^="chatContent_"] > form {
  background-color: transparent !important;
}

[class^="standardSidebarView_"]
  > [class^="sidebarRegion_"]
  > [class^="sidebarRegionScroller_"],
[class^="standardSidebarView_"]
  > [class^="contentRegion_"]
  [class^="contentTransitionWrap_"] {
  padding: 2px;
  box-shadow: var(--wc-inner-edge);
}
[class^="standardSidebarView_"] > [class^="contentRegion_"],
[class^="standardSidebarView_"] > [class^="sidebarRegion_"] {
  margin-top: 2px;
}
[class^="standardSidebarView_"]
  > [class^="contentRegion_"]
  [class^="contentTransitionWrap_"] {
  height: calc(100% - 4px);
}

div[class^="sidebar_"] {
  border-left: 4px solid #{colors.$primary};
}

div[class^="sidebar_"]:not(:has(> [class^="side_"]))
  > nav[class^="container_"]
  > [class^="container_"][class*="clickable_"]
  > [class^="animatedContainer_"] {
  height: 48px;
}

div[class^="sidebar_"]:not(:has(> [class^="side_"]))
  > nav[class^="container_"]
  > [class^="container_"][class*="clickable_"]
  > [class^="animatedContainer_"]
  > [class^="bannerImage_"] {
  height: 48px;
}
div[class^="sidebar_"]:not(:has(> [class^="side_"]))
  > nav[class^="container_"]
  > [class^="container_"][class*="clickable_"]
  > [class^="animatedContainer_"]
  > [class^="bannerImage_"]:after {
  content: "";
  height: 48px;
  width: 240px;
  top: 0;
  left: 0;
  position: absolute;
  background: linear-gradient(
    0deg,
    var(--background-secondary) 5%,
    transparent 100%
  );
}

div[class^="sidebar_"]:not(:has(> [class^="side_"]))
  > nav[class^="container_"]
  > [class^="container_"][class*="clickable_"]
  > [class^="animatedContainer_"]
  [class^="bannerImg_"] {
  top: -67px;
  position: relative;
}

div[class^="sidebar_"]:not(:has(> [class^="side_"]))
  > nav[class^="container_"]
  > [class^="scroller_"]
  > ul
  > div[style="height: 84px;"] {
  height: 0 !important;
}

[class*="menu_"] {
  border-radius: 0 !important;
  padding: 2px;
  box-shadow: var(--wc-frame) !important;
}
[class*="menu_"] > [class^="scroller_"] {
  padding: 1px 1px 4px 1px !important;
  margin-right: -4px;
}
[class*="menu_"] > [class^="scroller_"] [class^="item_"] {
  border-radius: 0 !important;
  margin: 1px 0;
  padding: 0 2px !important;
}
[class*="menu_"]
  > [class^="scroller_"]
  [class^="customItem_"][id^="message-quickreact_"]
  > [class^="button_"] {
  border-radius: 0 !important;
  box-shadow: var(--wc-outer-edge);
}

[class^="submenuPaddingContainer_"] {
  padding: 0;
  margin: -4px;
}

[class^="scroller_"]:not([class*="none_"]):not([class*="thin_"]):not(
    :not(:hover)[class*="fade_"]
  )::-webkit-scrollbar,
[class*="scrollerBase_"]:not([class*="none_"]):not([class*="thin_"]):not(
    :not(:hover)[class*="fade_"]
  )::-webkit-scrollbar {
  min-width: 16px;
  width: 16px;
}

[class^="scroller_"]:not([class*="thin_"])::-webkit-scrollbar-track,
[class*="scrollerBase_"]:not([class*="thin_"])::-webkit-scrollbar-track {
  background-color: #{colors.$c8};
  border: none;
  border-radius: 0;
  margin: 0;
}
[class^="scroller_"]::-webkit-scrollbar-thumb,
[class*="scrollerBase_"]::-webkit-scrollbar-thumb,
[class^="scroller_"]:not(
    [class*="thin_"]
  )::-webkit-scrollbar-button:single-button,
[class*="scrollerBase_"]:not(
    [class*="thin_"]
  )::-webkit-scrollbar-button:single-button {
  border-radius: 0 !important;
  background: #{colors.$primary} !important;
  box-shadow: var(--wc-frame);
  border: none !important;
}

[class^="scroller_"][class*="fade_"]:not(
    [class*="thin_"]
  )::-webkit-scrollbar-button:single-button,
[class*="scrollerBase_"][class*="fade_"]:not(
    [class*="thin_"]
  )::-webkit-scrollbar-button:single-button {
  visibility: hidden;
}
[class^="scroller_"][class*="fade_"]:not(
    [class*="thin_"]
  ):hover::-webkit-scrollbar-button:single-button,
[class*="scrollerBase_"][class*="fade_"]:not(
    [class*="thin_"]
  ):hover::-webkit-scrollbar-button:single-button {
  visibility: visible;
}

[class^="scroller_"]::-webkit-scrollbar-button:single-button:active,
[class*="scrollerBase_"]::-webkit-scrollbar-button:single-button:active {
  box-shadow: inset 1px 1px #{colors.$secondary},
    inset -1px -1px #{colors.$secondary};
}
[class^="scroller_"]:not(
    [class*="thin_"]
  )::-webkit-scrollbar-button:single-button:vertical:decrement,
[class*="scrollerBase_"]:not(
    [class*="thin_"]
  )::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-repeat: no-repeat !important;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgdmlld0JveD0iMCAwIDE1IDE1Ij4NCgk8cmVjdCBoZWlnaHQ9IjEiIHdpZHRoPSI3IiB5PSI4IiB4PSIzIiBmaWxsPSJtZW51dGV4dCIvPjxyZWN0IGhlaWdodD0iMSIgd2lkdGg9IjUiIHg9IjQiIHk9IjciIGZpbGw9Im1lbnV0ZXh0Ii8+PHJlY3QgaGVpZ2h0PSIxIiB3aWR0aD0iMyIgeT0iNiIgeD0iNSIgZmlsbD0ibWVudXRleHQiLz48cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB5PSI1IiB4PSI2IiBmaWxsPSJtZW51dGV4dCIvPg0KCQ0KCQ0KPC9zdmc+") !important;
  background-position: center center !important;
}
[class^="scroller_"]:not(
    [class*="thin_"]
  )::-webkit-scrollbar-button:single-button:vertical:increment,
[class*="scrollerBase_"]:not(
    [class*="thin_"]
  )::-webkit-scrollbar-button:single-button:vertical:increment {
  background-repeat: no-repeat !important;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTUiIHdpZHRoPSIxNSIgdmlld0JveD0iMCAwIDE1IDE1Ij4NCgk8cmVjdCBoZWlnaHQ9IjEiIHdpZHRoPSI3IiB4PSIzIiB5PSI1IiBmaWxsPSJtZW51dGV4dCIvPjxyZWN0IGhlaWdodD0iMSIgd2lkdGg9IjUiIHk9IjYiIHg9IjQiIGZpbGw9Im1lbnV0ZXh0Ii8+PHJlY3QgaGVpZ2h0PSIxIiB3aWR0aD0iMyIgeD0iNSIgeT0iNyIgZmlsbD0ibWVudXRleHQiLz48cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4PSI2IiB5PSI4IiBmaWxsPSJtZW51dGV4dCIvPg0KCQ0KCQ0KPC9zdmc+") !important;
  background-position: center center !important;
}

[class^="scroller_"]::-webkit-scrollbar-button:single-button,
[class*="scrollerBase_"]::-webkit-scrollbar-button:single-button {
}
[class^="scroller_"]:not(
    [class*="thin_"]
  )::-webkit-scrollbar-button:single-button:vertical:decrement,
[class*="scrollerBase_"]:not(
    [class*="thin_"]
  )::-webkit-scrollbar-button:single-button:vertical:decrement {
  border-width: 0 8px 8px 8px;
  border-color: transparent transparent var(--text) transparent;
}

.postnet-expanded-category,
.postnet-repo-wrapper,
[class^="inner_"]:has(> input),
[class^="inputWrapper_"] > [class*="input_"],
[class^="colorSwatch_"] > [class^="swatch_"][aria-expanded="true"] {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: var(--wc-inner-edge);
}
[class^="colorSwatch_"] > [class^="swatch_"] {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: var(--wc-outer-edge);
}

[class^="inputWrapper_"] > [class*="input_"] {
  padding: 2px 2px 2px 4px;
  height: 22px;
}

[class^="select_"][class*="lookFilled_"] {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: var(--wc-inner-edge);
  padding: 2px 2px 2px 4px;
}
[class^="select_"][class*="lookFilled_"] > [class^="icons_"] {
  margin: 2px;
}
[class^="select_"][class*="lookFilled_"] > [class^="icons_"] > svg {
  background: #{colors.$primary};
  box-shadow: var(--wc-outer-edge);
  width: 16px;
  height: 16px;
}
[class^="select_"][class*="lookFilled_"][class*="open_"]
  > [class^="icons_"]
  > svg {
  box-shadow: var(--wc-inner-edge);
}
[class^="popout_"][role="listbox"] > [class^="option_"] {
  padding: 2px 2px 2px 4px;
  margin: 2px 0;
}
[class^="popout_"][role="listbox"] > [class^="option_"]:hover {
  background-color: var(--accent);
}

[class^="layerContainer_"] > [class*="layer_"] > [class^="tooltip_"] {
  box-shadow: none;
  -webkit-box-shadow: none;
  border: 1px solid var(--text-normal);
  background-color: var(--background-primary);
  border-radius: 0;

  [class^="tooltipContent_"] {
    padding: 2px 4px;
    font-size: 12px;
    line-height: 12px;
  }

  [class^="tooltipPointer_"] {
    display: none;
  }

  [class*="rowGuildName_"] {
    align-items: center;
  }
}

[class*="guilds_"] {
  background-color: var(--ThreeDFace) !important;
  box-shadow: var(--wc-rebar);
  width: 48px;
  padding: 2px;

  [class^="scroller_"] {
    padding-top: 4px;

    &::-webkit-scrollbar,
    &::-webkit-scrollbar-thumb,
    &::-webkit-scrollbar-button,
    &::-webkit-scrollbar-button:single-button,
    &::-webkit-scrollbar-track {
      visibility: hidden !important;
      width: 0px !important;
      min-width: 0px !important;
    }

    & > div[style*="height: 56px;"]:has(> [class^="listItem_"]) {
      height: unset !important;
    }
  }

  [class^="listItemWrapper_"] > [class^="wrapper_"] {
    width: 40px;
    height: 40px;
    & > svg {
      width: 40px;
      height: 40px;
    }
  }
  [class^="listItem_"] {
    --custom-list-items-list-item-width: 48px;
    margin: 0 !important;

    [class^="lowerBadge_"] {
      top: 0;
      z-index: 11;
      width: 16px;
      height: 16px;
      background-repeat: no-repeat;
      background-position: center;
      image-rendering: pixelated;

      &:has(> [class^="numberBadge_"][style*="--status-danger"]) {
        background-image: var(--ImagePing);

        & > [class^="numberBadge_"] {
          display: none;
        }
      }
    }
    [class^="upperBadge_"] {
      left: 0;
      right: unset;
      z-index: 11;
      width: 16px;
      height: 16px;
      background-repeat: no-repeat;
      background-position: center;
      image-rendering: pixelated;

      &:has(
          > [class^="iconBadge_"]
            > svg
            > path[d="M4 2.5C2.897 2.5 2 3.397 2 4.5V15.5C2 16.604 2.897 17.5 4 17.5H11V19.5H7V21.5H17V19.5H13V17.5H20C21.103 17.5 22 16.604 22 15.5V4.5C22 3.397 21.103 2.5 20 2.5H4ZM20 4.5V13.5H4V4.5H20Z"]
        ) {
        background-image: var(--ImageMonitor);

        & > [class^="iconBadge_"] {
          display: none;
        }
      }

      &:has(
          > [class^="iconBadge_"]
            > svg
            > path[d="M11.383 3.07904C11.009 2.92504 10.579 3.01004 10.293 3.29604L6 8.00204H3C2.45 8.00204 2 8.45304 2 9.00204V15.002C2 15.552 2.45 16.002 3 16.002H6L10.293 20.71C10.579 20.996 11.009 21.082 11.383 20.927C11.757 20.772 12 20.407 12 20.002V4.00204C12 3.59904 11.757 3.23204 11.383 3.07904ZM14 5.00195V7.00195C16.757 7.00195 19 9.24595 19 12.002C19 14.759 16.757 17.002 14 17.002V19.002C17.86 19.002 21 15.863 21 12.002C21 8.14295 17.86 5.00195 14 5.00195ZM14 9.00195C15.654 9.00195 17 10.349 17 12.002C17 13.657 15.654 15.002 14 15.002V13.002C14.551 13.002 15 12.553 15 12.002C15 11.451 14.551 11.002 14 11.002V9.00195Z"]
        ) {
        background-image: var(--ImageSpeaker);

        & > [class^="iconBadge_"] {
          display: none;
        }
      }

      &:has(
          > [class^="iconBadge_"]
            > svg
            > path[d="M21.526 8.149C21.231 7.966 20.862 7.951 20.553 8.105L18 9.382V7C18 5.897 17.103 5 16 5H4C2.897 5 2 5.897 2 7V17C2 18.104 2.897 19 4 19H16C17.103 19 18 18.104 18 17V14.618L20.553 15.894C20.694 15.965 20.847 16 21 16C21.183 16 21.365 15.949 21.526 15.851C21.82 15.668 22 15.347 22 15V9C22 8.653 21.82 8.332 21.526 8.149Z"]
        ) {
        background-image: var(--ImageCamera);

        & > [class^="iconBadge_"] {
          display: none;
        }
      }
    }

    & > [class^="guildSeparator_"] {
      width: 48px;
      border-radius: 0;
      height: 1px;
      border-top: solid 1px var(--ThreeDShadow);
      background-color: var(--ThreeDHighlight);
      margin: 3px 2px;
    }

    [class^="pill_"] {
      width: 16px;
      height: 16px;
      left: unset;
      right: 4px;
      z-index: 10;
      pointer-events: none;

      &:has(> [class^="item_"][style*="height: 8px;"]) {
        background-image: var(--ImageUnread);
        background-repeat: no-repeat;
        background-position: center;
        image-rendering: pixelated;
      }

      [class^="item_"] {
        display: none;
      }
    }

    [class*="selected_"] > [class^="wrapper_"]:has(> svg) {
      box-shadow: inset -1px -1px 0 0 var(--ThreeDHighlight),
        inset 1px 1px 0 0 var(--ThreeDShadow);
      &:hover {
        box-shadow: inset -1px -1px 0 0 var(--ThreeDHighlight),
          inset 1px 1px 0 0 var(--ThreeDShadow);
      }
    }

    [class^="wrapper_"]:has(> svg) {
      width: 40px;
      height: 40px;
      & > svg {
        width: 40px;
        height: 40px;

        img[class^="icon_"] {
          width: 38.41px;
          height: 38.41px;
        }

        [class^="folder_"] {
          background-color: transparent;
          [class^="folderIconWrapper_"] {
            width: 38.41px;
            height: 38.41px;
            padding: 4.8px;
            mask-image: var(--ImageFolderClosed);
            mask-repeat: no-repeat;
            mask-position: center;
            mask-size: 38.41px;
            -webkit-mask-image: var(--ImageFolderClosed);
            -webkit-mask-repeat: no-repeat;
            -webkit-mask-position: center;
            -webkit-mask-size: 38.41px;
            background-size: 38.41px;
            image-rendering: pixelated;

            &::before,
            &::after {
              position: absolute;
              content: "";
              display: block;
              width: 38.41px;
              height: 38.41px;

              mask-image: var(--ImageFolderClosed);
              mask-repeat: no-repeat;
              mask-position: center;
              mask-size: 38.41px;
              -webkit-mask-image: var(--ImageFolderClosed);
              -webkit-mask-repeat: no-repeat;
              -webkit-mask-position: center;
              -webkit-mask-size: 38.41px;
              /*background-image: var(--ImageFolderClosed);
              background-repeat: no-repeat;
              background-position: center;
              background-color: transparent !important;*/
              background-size: 38.41px;
              background-color: inherit;
            }

            &:has(
                [class^="expandedFolderIconWrapper_"]:not([style^="transform:"])
              ) {
              background-image: none;
            }

            [class^="closedFolderIconWrapper_"] {
              width: 38.41px;
              height: 38.41px;
              padding: 0;
              background-color: inherit;
              display: block;

              &::before {
                position: absolute;
                content: "";
                display: block;
                width: 38.41px;
                height: 38.41px;

                mask-image: var(--ImageFolderClosed);
                mask-repeat: no-repeat;
                mask-position: center;
                mask-size: 38.41px;
                -webkit-mask-image: var(--ImageFolderClosed);
                -webkit-mask-repeat: no-repeat;
                -webkit-mask-position: center;
                -webkit-mask-size: 38.41px;
                /*background-image: var(--ImageFolderClosed);
                background-repeat: no-repeat;
                background-position: center;
                background-color: transparent !important;*/
                background-size: 38.41px;
                background-color: inherit;
              }
              &::after {
                position: absolute;
                content: "";
                display: block;
                width: 38.41px;
                height: 38.41px;

                background-image: var(--ImageFolderClosedOverlay);
                background-size: 38.41px;
              }

              & > [class^="icon_"] {
                width: 38.41px;
                height: 38.41px;
                background-color: inherit;
                background-image: none !important;
                position: absolute;

                &::before {
                  position: absolute;
                  content: "";
                  display: block;
                  width: 38.41px;
                  height: 38.41px;

                  mask-image: var(--ImageFolderClosed);
                  mask-repeat: no-repeat;
                  mask-position: center;
                  mask-size: 38.41px;
                  -webkit-mask-image: var(--ImageFolderClosed);
                  -webkit-mask-repeat: no-repeat;
                  -webkit-mask-position: center;
                  -webkit-mask-size: 38.41px;
                  /*background-image: var(--ImageFolderClosed);
                  background-repeat: no-repeat;
                  background-position: center;
                  background-color: transparent !important;*/
                  background-size: 38.41px;
                  background-color: inherit;
                }
              }
            }

            [class^="expandedFolderIconWrapper_"] {
              width: unset;
              height: unset;

              &::after {
                content: "";
                position: absolute;
                width: 38.41px;
                height: 38.41px;
                background-image: var(--ImageFolderOpenOverlay);
                background-size: 38.41px;
              }

              & > svg {
                width: 38.41px;
                height: 38.41px;

                background-color: currentColor;

                mask-image: var(--ImageFolderOpen);
                mask-repeat: no-repeat;
                mask-position: center;
                mask-size: 38.41px;
                -webkit-mask-image: var(--ImageFolderOpen);
                -webkit-mask-repeat: no-repeat;
                -webkit-mask-position: center;
                -webkit-mask-size: 38.41px;
                /*background-image: var(--ImageFolderOpen);
                background-repeat: no-repeat;
                background-position: center;
                background-color: transparent !important;*/
                background-size: 38.41px;
                image-rendering: pixelated;

                & > path {
                  display: none;
                }
              }
              &[style^="transform:"] > svg {
                background-image: none;
              }
            }
          }
        }

        [class^="childWrapper_"] {
          background-color: transparent;
        }
      }

      &:hover {
        box-shadow: inset -1px -1px 0 0 var(--ThreeDShadow),
          inset 1px 1px 0 0 var(--ThreeDHighlight);
      }
    }
    [class^="wrapperSimple_"] {
      width: 40px;
      height: 40px;
      & > svg {
        width: 40px;
        height: 40px;

        img[class^="icon_"] {
          width: 38px;
          height: 38px;
        }
      }
    }

    [class^="circleIconButton_"] {
      background-color: transparent;
      &:hover {
        box-shadow: inset -1px -1px 0 0 var(--ThreeDShadow),
          inset 1px 1px 0 0 var(--ThreeDHighlight);
      }
    }

    [data-list-item-id="guildsnav___home"] > [class^="childWrapper_"] > svg {
      background-image: var(--ImageHome);
      background-repeat: no-repeat;
      background-position: center;
      image-rendering: pixelated;
      width: 38.41px;
      height: 38.41px;
      background-size: 38.41px;

      & > path {
        display: none;
      }
    }

    [data-list-item-id="guildsnav___guild-discover-button"] > svg {
      background-image: var(--ImageDiscovery);
      background-repeat: no-repeat;
      background-position: center;
      image-rendering: pixelated;
      width: 38.41px;
      height: 38.41px;
      background-size: 38.41px;

      & > path {
        display: none;
      }
    }

    [data-list-item-id="guildsnav___create-join-button"] > svg {
      background-image: var(--ImageAdd);
      background-repeat: no-repeat;
      background-position: center;
      image-rendering: pixelated;
      width: 38.41px;
      height: 38.41px;
      background-size: 38.41px;

      & > path {
        display: none;
      }
    }
  }

  ul[id^="folder-items-"] {
    height: unset !important;
    box-shadow: var(--wc-frame);
    padding: 4px;
    & > [class^="listItem_"] {
      --custom-list-items-list-item-width: 40px;

      [class^="pill_"] {
        right: 0px;
      }
    }
  }

  [class^="wrapper_"]:has(> [class^="expandedFolderBackground_"]) {
    width: unset !important;
  }

  [class^="expandedFolderBackground_"] {
    background-color: transparent;
    width: unset;

    & + [class^="listItem_"] [class^="wrapper_"]:has(> svg) {
      height: 62px;

      &::after {
        position: absolute;
        content: "";
        height: 23px;
        width: 40px;
        left: 0;
        bottom: 0;
        text-align: center;
        background-image: var(--ImageScrollbarDown);
        background-repeat: no-repeat;
        background-position: center;
        image-rendering: pixelated;
      }
      &:has([class^="folder_"][aria-expanded="true"]) {
        box-shadow: inset -1px -1px 0 0 var(--ThreeDShadow),
          inset 1px 1px 0 0 var(--ThreeDHighlight);
      }

      &:hover::after {
        box-shadow: inset 0 1px var(--ThreeDShadow),
          inset -1px -1px 0 0 var(--ThreeDShadow),
          inset 1px 2px 0 0 var(--ThreeDHighlight);
      }
      &:has([class^="folder_"][aria-expanded="true"])::after {
        box-shadow: inset 0 1px var(--ThreeDShadow),
          inset -1px -1px 0 0 var(--ThreeDHighlight),
          inset 1px 2px 0 0 var(--ThreeDShadow);
      }
    }
  }
}