/* Colors setup */
* {
    --custom-logo: url(https://dom1torii.github.io/discord16/src/assets/steam-logo.svg) !important;

    --font-primary: var(--font), sans-serif !important;

    --app-background-frame: var(--custom-bg) !important;
    --background-primary: var(--custom-bg) !important;
    --background-modifier-selected: var(--custom-secondary-accent) !important;
    --background-tertiary: var(--custom-bg) !important;
    --background-accent: var(--custom-bg) !important;
    --bg-base-tertiary: var(--custom-bg) !important;
    --custom-channel-members-bg: var(--custom-bg) !important;
    --background-base-low: var(--custom-bg) !important;
    --background-base-lower: var(--custom-bg) !important;
    --background-base-lowest: var(--custom-bg) !important;
    --bg-overlay-chat: var(--custom-bg) !important;
    --custom-app-top-bar-height: 35px !important;
    --scrollbar-auto-thumb: var(--custom-bg) !important;
    --scrollbar-thin-thumb: var(--custom-bg) !important;
    --background-mod-subtle: var(--custom-bg) !important;
    --background-mod-normal: var(--custom-secondary-accent) !important;
    --background-surface-high: var(--custom-bg) !important;
    --background-surface-higher: var(--custom-bg) !important;
    --background-surface-highest: var(--custom-bg) !important;
    --background-floating: var(--custom-bg) !important;
    --bg-surface-overlay: var(--custom-bg) !important;
    --bg-surface-overlay-tmp: var(--custom-bg) !important;
    --bg-surface-raised: var(--custom-bg) !important;
    --background-secondary-alt: var(--custom-bg) !important;
    --background-secondary: var(--custom-bg) !important;
    --background-floating: var(--custom-bg) !important;
    --bg-mod-subtle: var(--custom-bg) !important;
    --card-primary-bg: var(--custom-bg) !important;
    --modal-background: var(--custom-bg) !important;
    --modal-footer-background: var(--custom-bg) !important;
    --interactive-muted: grey !important;
    --button-secondary-background: var(--custom-bg) !important;
    --autocomplete-bg: var(--custom-bg) !important;
    --status-danger: var(--custom-secondary-accent) !important;

    --background-message-hover: var(--custom-secondary-bg) !important;

    --checkbox-background-default: var(--custom-secondary-bg) !important;

    --primary-800: var(--custom-bg) !important;

    --input-background: var(--custom-secondary-bg) !important;

    --shadow-high: 0 12px 24px 0 var(--custom-bg) !important;

    --text-normal: var(--custom-text) !important;
    --text-primary: var(--custom-text) !important;
    --text-tertiary: var(--custom-secondary-text) !important;
    --text-muted: var(--custom-secondary-text) !important;
    --chat-text-muted: var(--custom-secondary-text) !important;
    --channels-default: var(--custom-secondary-text) !important;
    --header-secondary: var(--custom-secondary-text) !important;
    --header-primary: var(--custom-text) !important;

    --interactive-normal: var(--custom-secondary-text) !important;
    --interactive-hover: var(--custom-text) !important;

    --icon-primary: var(--custom-text) !important;
    --icon-secondary: var(--custom-secondary-text) !important;
    --icon-tertiary: var(--custom-secondary-text) !important;
    --channel-icon: var(--custom-secondary-text) !important;


    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: none;
    font-smooth: never;
}

@font-face {
    font-family: "ArialPixel";
    src: url(https://raw.githubusercontent.com/dom1torii/discord16/refs/heads/main/src/assets/ArialPixel.woff2) format("woff2");
    font-weight: normal;
    font-style: normal;
}

@property --rounded-avatars {
    syntax: "true | false";
    initial-value: false;
    name: "Rounded Avatars";
    note: "Enables rounded avatars";
}

@property --steam-logo {
    syntax: "true | false";
    initial-value: true;
    name: "Steam Logo";
    note: "Enables steam logo instead of discord logo";
}




* {
    border-radius: 0 !important;
}

.visual-refresh .container_c8ffbb, .visual-refresh .header_f37cb1, .visual-refresh .container__9293f, .sidebarList_c48ade {
    border: none !important;
    
}

.tierIconLocked_f15dca {
    color: grey;
}

.selected_bf202d {
    background-color: var(--custom-secondary-accent) !important;
}

:where(.visual-refresh) .interactive__972a0:hover {
    background-color: rgba(0, 0, 0, 0.3) !important;
}

:where(.visual-refresh) .interactive__972a0.selected_bf202d:hover {
    background-color: var(--custom-secondary-accent) !important;
}


.visual-refresh .container_f37cb1 {
    z-index: 10 !important;
}


/* remove server header hover blur and border */
:where(.visual-refresh) .bannerVisible_f37cb1 .headerEllipseBackdrop_f37cb1,
:where(.visual-refresh) .bannerVisible_f37cb1 .headerGlass_f37cb1 {
    backdrop-filter: none !important;
    border: none !important;
}

.member_c8ffbb {
    background-color: transparent !important;
}

.title_c38106 {
    justify-content: start;
}

.visual-refresh .title__85643 {
    margin: 0px 5px 0px 5px;
}

.visual-refresh .chatContent_f75fb0,
.visual-refresh .container_f37cb1,
.visual-refresh .container__9293f,
.visual-refresh .channelHeader__35a7e,
.visual-refresh .messages__1ccd1,
.visual-refresh .scroller__99e7c,
.listItemWrapper__91816,
.members_c8ffbb,
.visual-refresh .scroller__629e4,
.visual-refresh .content_c48ade {
    margin: 5px;
}

.visual-refresh .channelTextArea_f75fb0 {
    background-color: var(--custom-secondary-bg) !important;
}

.public-DraftEditorPlaceholder-hasFocus,
input:focus::placeholder {
    color: var(--custom-accent) !important;
}


:where(.visual-refresh) .themedBackground__74017,
.visual-refresh .searchBar__97492,
.visual-refresh .scroller__629e4,
.members_c8ffbb,
.visual-refresh .scroller__99e7c,
textarea,
div:not([class="contents__201d5"]):not([class="value__3f413"]):not([class="value__3f413 multi__3f413"]):has(> input),
.checkbox_f525d3 {
    background-color: var(--custom-secondary-bg) !important;
    border: 1px solid !important;
    border-color: var(--dark-border) var(--light-border) var(--light-border) var(--dark-border) !important;
}


.standardSidebarView__23e6b {
    background-color: transparent;
}

.emojiWrapper__4cbea {
    margin-left: -35px;
}

.emojiItem_fc7141[tabindex="0"] {
    background-color: var(--custom-secondary-bg) !important;
}

@container style(--rounded-avatars: false) {
    .listItem__650eb > div:not(div.folderHeader__48112) .wrapper_cc5dd2 {
        box-shadow: 
            1px 0 0 0 var(--dark-border),
            -1px 0 0 0 var(--light-border),
            0 1px 0 0 var(--dark-border),
            0 -1px 0 0 var(--light-border);
    }

    .wrapper_cc5dd2 foreignObject {
        mask: none !important;
    }
}

.folderButton__48112[aria-expanded="false"] {
    box-shadow: 
        1px 0 0 0 var(--dark-border),
        -1px 0 0 0 var(--light-border),
        0 1px 0 0 var(--dark-border),
        0 -1px 0 0 var(--light-border);
}



.folderButton__48112[aria-expanded="true"] {
    box-shadow: none;
}

.folderGroupBackground__48112 {
    box-shadow: 
    1px 0 0 0 var(--dark-border),
    -1px 0 0 0 var(--light-border),
    0 1px 0 0 var(--dark-border),
    0 -1px 0 0 var(--light-border);
}






.visual-refresh .panels_c48ade,
.visual-refresh .chatContent_f75fb0,
.listItemWrapper__91816,
.visual-refresh .content_c48ade,
.visual-refresh .container_f37cb1,
.visual-refresh .toolbar__9293f .iconWrapper__9293f,
.visual-refresh .button__85643,
::-webkit-scrollbar-thumb,
.app__160d8 button:not(.clearStatusButton__958c7):not(.attachButton__0923f):not(.barButtonMain__0f481),
:where(.visual-refresh) .menu_c1e9c4,
.message__5126c .buttonsInner__5126c,
.floatingBars__74017:empty+.stackedBars__74017:nth-child(2),
.customItem_c1e9c4,
:where(.visual-refresh) .tooltipPrimary__382e7,
:where(.visual-refresh) .popout__3f413:not(.popoutPositionTop__3f413),
.card__5cea9,
.loadMoreButton__5cea9,
.visual-refresh .box_f8c98c,
.visual-refresh .cardPrimary__73069,
.metadataContainer_c7f964,
.visual-refresh .rootWithShadow__49fc1,
.boostContainer_ceb06a,
.visual-refresh .shopCard_c3d04b,
.loadingPopout__58f1c,
.visual-refresh .contentWrapper__08434,
.visual-refresh .messageGroupWrapper__45690,
.visual-refresh .jumpButton__45690,
.visual-refresh .messagesPopoutWrap__45690,
.visual-refresh .container_d9c882,
.visual-refresh .container__6764b,
.actionButton_f8fa06,
.item__133bf,
:where(.visual-refresh) .top_b3f026 .item_b3f026,
.controls_ab6641 > div,
.visual-refresh .container__2692d,
.channel__427f0,
.visual-refresh .channelHeader__35a7e,
.visual-refresh .messages__1ccd1,
.tertiary__06eda,
.visual-refresh .reaction__23977,
.visual-refresh .reactionBtn__23977,
.visual-refresh .autocompleteAttached__6b0e0,
.closeButton_c2b141,
.reactionTooltip_b49891,
.container__55c99,
.bar__7aaec,
.popoutContainer__0f481,
.authedAppV2__50a54,
body {
    transition: none !important;
    border: 1px solid !important;
    border-color: var(--light-border) var(--dark-border) var(--dark-border) var(--light-border) !important;
    box-shadow: none !important;
}


.app__160d8 button:active,
.visual-refresh .button__85643:active,
.visual-refresh .toolbar__9293f .iconWrapper__9293f:active,
.visual-refresh .container_f37cb1:active,
.listItemWrapper__91816:active,
.loadMoreButton__5cea9:active,
.customItem_c1e9c4:active
.actionButton_f8fa06:active,
.item__133bf:active,
.selected_b3f026,
.select__3f413,
.radioIndicator__001a7 {
    border: 1px solid !important;
    border-color: var(--dark-border) var(--light-border) var(--light-border) var(--dark-border) !important;
    box-shadow: none !important;
}



.container_cd2100 {
    border: none !important;
}

/* hide tooltip pointers */
:where(.visual-refresh) .tooltipPointer__382e7.tooltipPointerBg__382e7,
:where(.visual-refresh) .tooltipTop__382e7 .tooltipPointer__382e7:not(.tooltipPointerBg__382e7),
:where(.visual-refresh) .tooltipRight__382e7 .tooltipPointer__382e7:not(.tooltipPointerBg__382e7) {
    display: none !important;
}

.uploadInput__0923f {
    visibility: hidden;
}

.visual-refresh .childWrapperNoHoverBg__6e9f8, .visual-refresh .tabBar__133bf > div:hover, .visual-refresh .topPill_b3f026 .themed_b3f026.item_b3f026:hover:not(.disabled_b3f026) {
    background-color: transparent;
    color: white;
}

.tabBar_ab6641 {
    display: flex;
    align-items: center;
}

:where(.visual-refresh) .top_b3f026 .item_b3f026 {
    padding-top: 5px;
    padding-bottom: 5px;
}

.children__9293f::after {
    background: linear-gradient(90deg, rgba(54, 57, 63, 0) 0, var(--custom-bg)) !important;
}

:where(.visual-refresh) .wrapper__2ea32 > div:hover, :where(.visual-refresh) .link__2ea32:active{
    background-color: rgba(0, 0, 0, 0.3) !important;
}





/* some status stuff stolen from https://refact0r.github.io/system24/src/unrounding.css */

@container style(--rounded-avatars: false) {
    /* hide round masks */
    [class^='listItem_'] [class^='wrapper_'] > [class^='svg_'] > mask,
    [class^='bannerSVGWrapper_'] > mask > circle {
        display: none;
    }

    [class^='mask_'] > foreignObject,
    [class^='svg_'] > foreignObject {
        mask-image: none;
    }

    /* fill circle mask on profile avatar */
    .overlay__75742:after,
    .overlay_c0bea0:after {
        border-radius: 0;
    }
}

@container style(--rounded-avatars: true) {
    /* Status indicator rounding */
    .wrapper__44b0c:has(rect)::after {
        border-radius: 50%;
    }

    /* Remove status indicator mask */
    .wrapper__44b0c .mask__44b0c foreignObject {
        mask-image: none;
        border-radius: 50% !important;
    }

    /* Voice avatar */
    .userAvatar__55bab {
        border-radius: 50% !important;
    }

}

/* hide status indicators */
[class^='mask_'] rect,
[class^='mask_'] circle,
[class^='mask_'] svg {
	display: none;
}

/* re-add status indicators */
.wrapper__44b0c:has(rect)::after {
	content: '';
	display: block;
	position: absolute;
	height: 100%;
	width: 100%;
}

g:has(rect[mask='url(#svg-mask-status-online)']),
g:has(rect[mask='url(#svg-mask-status-dnd)']),
g:has(rect[mask='url(#svg-mask-status-idle)']),
g:has(rect[mask='url(#svg-mask-status-offline)']),
g:has(rect[mask='url(#svg-mask-status-streaming)']) {
    display: none;
}

/* Online + Online Mobile */
.wrapper__44b0c:has(rect[mask='url(#svg-mask-status-online)'])::after,
.wrapper__44b0c:has(rect[mask='url(#svg-mask-status-online-mobile)'])::after {
	background: transparent !important;
    outline: 2px solid #57CBDE;
}

/* Do not disturb */
.wrapper__44b0c:has(rect[mask='url(#svg-mask-status-dnd)'])::after {
    background: transparent !important;
    outline: 2px solid #ff4133;
}

/* Idle */
.wrapper__44b0c:has(rect[mask='url(#svg-mask-status-idle)'])::after {
    background: transparent !important;
    outline: 2px solid #f58b05;
}

/* Offline */
.wrapper__44b0c:has(rect[mask='url(#svg-mask-status-offline)'])::after {
    background: transparent !important;
    outline: 2px solid #898989;
}

/* Streaming */
.wrapper__44b0c:has(rect[mask='url(#svg-mask-status-streaming)'])::after {
    background: transparent !important;
    outline: 2px solid #9147ff;
}

.avatarDecoration__44b0c {
    z-index: 2 !important;
}

.childContainer__91a9d:hover {
    background-color: rgba(0, 0, 0, 0.3) !important;
}

.sidebarList_c48ade {
    margin-bottom: 13px !important;
}

.visual-refresh .wrapper_ef3116 {
    margin-bottom: 84px !important;
}

.visual-refresh .panels_c48ade {
    --custom-panels-spacing: 5px !important;
}

.container_c48ade {
    --custom-chat-input-margin-bottom: 8px !important
}

.container__37e49 {
    padding: 12px !important;
}

.bar_c38106 {
    padding-right: 5px !important;
}

.headerEllipseForeground_f37cb1 {
    background: var(--custom-bg) !important;
}

.searchBar__97492 {
    width: 264px !important;
}

.title_f75fb0 {
    max-width: 100% !important;
}

.search__49676 {
    margin: 0 2px !important;
}

.base_b88801 {
    top: 0 !important;
    transform: translateY(-100%) !important;
}

.messagesWrapper__36d07 {
    margin-bottom: 25px !important;
}

.hoverablePayment_e9cb00:hover {
    background-color: var(--custom-secondary-bg) !important;
}

.radioIndicator__001a7 /* change radio indicator bg */ {
    background-color: var(--custom-secondary-bg) !important;
}

/* Unread messages bar */

.newMessagesBar__0f481 {
    background-color: var(--custom-secondary-accent) !important;
}

.newMessagesBar__0f481 > .barButtonAlt__0f481 {
    background-color: transparent !important;
}



/* Make radio indicators square */
.refreshIconFill__001a7,
.refreshIconStroke__001a7 {
    r: 0;
}
  
.item_b3f026 {
    padding: 10px;
}


/* Steam logo instead of discord (top left) */
@container style(--steam-logo: true) {
    .tutorialContainer__1f388 .wrapper_cc5dd2 > svg {
        opacity: 0 !important;
    }

    .tutorialContainer__1f388 .wrapper_cc5dd2::after {
        content: var(--custom-logo) !important;
        image-rendering: pixelated;
        image-rendering: crisp-edges;
    }
}



/* Scrollbar */

::-webkit-scrollbar {
    width: 7px !important;
    height: 7px !important;
}

::-webkit-scrollbar-thumb {
    border-radius: 0 !important;
}

.visual-refresh .scroller_ef3116::-webkit-scrollbar, .scroller_affa7e::-webkit-scrollbar {
    display: none !important;
}

/* Adds borders to any buttons added in the top bar area */
div.trailing_c38106 div[role=button] { 

    border: 1px solid !important;
    border-color: var(--light-border) var(--dark-border) var(--dark-border) var(--light-border) !important;
}
/*Adds border and padding to the inbox button*/
div.trailing_c38106 .clickable_c99c29 { 
    padding: 4px;
    border: 1px solid !important;
    border-color: var(--light-border) var(--dark-border) var(--dark-border) var(--light-border) !important;
}
