/**
* @name Optimal
* @author KawaiiZenbo#8387 (287197076150812673)
* @description everything we wanted in a theme, nothing we didnt
* @version 1.1.2
*/

@import url("https://mwittrien.github.io/BetterDiscordAddons/Themes/SettingsModal/SettingsModal.css");
@import url("https://stickfab.github.io/pc-fluenticons/FluentIcons.css");

:root
{
    --stupid-stuff: none;
	--mention-colour: 3,120,120;

    --bg1: 50,50,50;
    --bg2: 45,45,45;
    --bg3: 40,40,40;
    --bg4: 35,35,35;

	/* SettingsModal */
	--settingsmodalbackground:     transparent;            /* default:    transparent        (lowest bg color of changed windows, change it in case another theme turns them transparent)    */
    --settingsmodalwidth:         960px;                    /* default:    960px            (width of the settings modal, px/vw)                                                            */
    --settingsmodalheight:         80vh;                    /* default:    80vh            (height of the settings modal, px/vh)                                                            */
}

/* make light mode more tolerable */
.theme-light 
{
    --text-normal: #222222;
    --channels-default: #303030;
    --text-muted: #494949;
    --interactive-muted: #a0a0a0;
    --background-primary: rgb(196, 196, 196);
}

/* change dark mode colours */
.theme-dark
{
    --background-modifier-selected: rgb(var(--bg4));
    --background-message-hover: rgb(var(--bg2));
    --background-modifier-hover: rgb(var(--bg2));
    --background-modifier-active: rgb(var(--bg4));
    --background-floating: rgb(var(--bg3));
    --scrollbar-auto-thumb: rgb(var(--bg4));
    --scrollbar-auto-track: rgb(var(--bg1));
    --scrollbar-thin-thumb: rgb(var(--bg4));
    --activity-card-background: rgb(var(--bg3));
    --background-tertiary: rgb(var(--bg4));
    --background-secondary: rgb(var(--bg3));
    --background-secondary-alt: rgb(var(--bg3));
    --background-primary: rgb(var(--bg1));
    --channeltextarea-background: rgb(var(--bg3));
}

.peopleColumn-1wMU14 
{
    background: var(--background-primary);
}

.title-31SJ6t 
{
    background-color: var(--background-secondary) !important;
}

/* hi-colour mentions */
.mentioned-Tre-dv
{
    background-color: rgba(var(--mention-colour), 0.08) !important;
}

.mentioned-Tre-dv:hover
{
    background-color: rgba(var(--mention-colour), 0.1) !important;
}

div[class*="mentioned"]::before 
{
    width: 4px;
    background-color: rgb(var(--mention-colour));
}

div[class*="replying"]::before 
{
    width: 4px;
}

/* remove stuff we keep clicking on on accident :( */
div.iconWrapper-2awDjA.clickable-ZD7xvu[aria-label="Help"],
.wordmarkWindows-2dq6rw,
div[id="user-context-invite-to-server"],
div[id="user-context-call"],
.guildIconContainer-2FW_iA,
.children-3xh0VB::after,
.tabBarItemContainer-2HdIlr svg
{
    display: var(--stupid-stuff) !important;
}

/* make image attachments all the way square */
.imageWrapper-oMkQl4 
{
    border-radius: 0;
}

/* nicer close/minimize/maximize buttons on windows */
.winButtonClose-3Q8ZH5 
{
    height: 20px;
    width: 20px;
    border-radius: 50%;
    right: 1px;
    top: -3px;
}
  
.winButtonMinMax-3RsPUg:nth-child(3) 
{
    height: 20px;
    width: 20px;
    border-radius: 50%;
    right: 3px;
    top: -3px;
}
  
.winButtonMinMax-3RsPUg:nth-child(4) 
{
    height: 20px;
    width: 20px;
    border-radius: 50%;
    right: 5px;
    top: -3px;
}

/* reorder top bar and make search bar wider by default */
.searchBar-jGtisZ
{
    width: 210px;
}

.iconWrapper-2awDjA 
{
    order: -1;
}

/* role indicator background on user popout */
.role-2TIOKu 
{
    position: relative;
    overflow: hidden;
    z-index: 1;
    border-radius: 12px;
}

.roleCircle-1EgnFN 
{
    width: 5 !important;
    height: 5 !important;
}

.roleCircle-1EgnFN::before 
{
    position: absolute;
    content: "";
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: inherit;
    opacity: 0.3;
    z-index: -1;
}

/* server channel list backgrounds */
.content-1gYQeQ 
{
    background-color: var(--background-tertiary);
    border-radius: 25px;
}

/* red dot unread */
.unread-36eUEm 
{
    z-index: 1;
    position: absolute;
    height: 6px;
    width: 6px;
    border-radius: 50%;
    top: 42%;
    left: 1px;
    margin-top: 0px;
    background-color: hsl(359, calc(var(--saturation-factor, 1) * 82.6%), 59.4%);;
}

/* message text box rounded all the way */
.scrollableContainer-15eg7h 
{
    border-radius: 25px;
}

.attachedBars-2BCP3l, .replyBar-1oi75v
{
	border-radius: 20px !important;
}

/* behind message box gone */
.scroller-kQBbkU 
{
    margin-bottom: -100px;
    padding-bottom: 100px;
}

.form-3gdLxP:before 
{
    display: none;
}

.channelTextArea-1FufC0
{
    background: transparent !important;
}

/* blur message box bg */
.scrollableContainer-15eg7h
{
    background-color: rgba(var(--bg3), 0.5) !important;
    -webkit-backdrop-filter: blur(4px);
    -o-backdrop-filter: blur(4px);
    -moz-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    filter: drop-shadow(0rem 0rem 0.5rem rgba(0, 0, 20, 0.2));
}

.theme-light .scrollableContainer-15eg7h
{
    background-color: #e0e0e077 !important;
}

/* embed round on one side */
.embedFull-1HGV2S 
{
    border-radius: 0px 25px 25px 0px;
}

/* fix channel typing indicator on light mode */
.theme-light .channel-typing 
{
    filter: invert(1);
}

/* background a typing indicators */
.typingDots-1Y8dki
{
    background-color: var(--background-secondary);
    border-radius: 12px;
}