/***
 * @title			DiscordTheme
 * @description		Styles Fandom to resemble Discord's design.
 * @docs			[[DiscordTheme]]
 * @version			v2.1
 * @author			Caburum
 * @skin			FandomDesktop
 * @installation	@import url("/load.php?mode=articles&only=styles&articles=u:dev:MediaWiki:DiscordTheme.css"); 
 ***/

:root {
	--discord-accent: #5865F2;
	--discord-accent-secondary: #949cf7;
	--discord-accent-dark: #4752c4;
	--discord-link: #00b0f4;
	--discord-ping: #ed4245;
	--discord-success: #3ba55d;
	--discord-text: #eee;
	--discord-text-muted: #72767d;
	--discord-background-primary: #36393f;
	--discord-background-secondary: #2f3136;
	--discord-background-tertiary: #202225;
	--discord-background-accent: #4f545c;
	--discord-background-accent-hover: #5a6069;
	--discord-background-mentioned: #49443C;
	--discord-border: #23262A;
}

/* Overwrite the color of Fandom's logo colors to Discord colors */
#wds-brand-fandom-logo-light > path:nth-of-type(1),
#wds-brand-fandom-logomark > path:nth-of-type(1) {
	fill: var(--discord-accent);
}

#wds-brand-fandom-logo-light > path:nth-of-type(2),
#wds-brand-fandom-logomark > path:nth-of-type(2) {
	fill: var(--discord-accent-secondary);
}

#wds-brand-fandom-logo-light > path:nth-of-type(3) {
	fill: var(--discord-text);
}

#wds-brand-fandom-logo-store {
	filter: invert(47%) sepia(71%) saturate(5171%) hue-rotate(223deg) brightness(100%) contrast(99%); /* https://codepen.io/sosuke/pen/Pjoqqp */
}
#wds-brand-fandom-logo-store [fill="url(#SVGID_1_)"] {
	opacity: 0.3;
}
#wds-brand-fandom-logo-store [fill="url(#SVGID_3_)"] {
	opacity: 0;
}

/*** Global navigation ***/
.global-navigation {
	--fandom-global-nav-background-color: var(--discord-background-secondary);
	--fandom-global-nav-link-color: var(--discord-text);
	--fandom-global-nav-link-color--hover: var(--discord-accent);
	--fandom-global-nav-icon-color: var(--discord-text);
	--fandom-global-nav-icon-background-color: var(--discord-background-accent);
	--fandom-global-nav-icon-background-color--hover: var(--discord-accent);
	--fandom-global-nav-icon-background-color--active: var(--fandom-global-nav-icon-background-color--hover);
	--fandom-global-nav-icon-border-color: var(--discord-text);
	--fandom-global-nav-icon-border-color--hover: var(--fandom-global-nav-icon-background-color--hover);
	--fandom-global-nav-icon-border-color--active: var(--fandom-global-nav-icon-border-color--hover);
	--fandom-global-nav-bottom-icon-color: var(--fandom-global-nav-icon-color);
	--fandom-global-nav-counter-background-color: var(--discord-ping);
	--fandom-global-nav-counter-label-color: var(--discord-text);
}

/* Make "Start a Wiki" look like Discord's "Add a Server" */
.global-navigation__link[data-tracking-label="start-a-wiki"] .global-navigation__icon {
	color: var(--discord-success);
	background-color: var(--discord-background-accent);
	border: none;
}

.global-navigation__link[data-tracking-label="start-a-wiki"] .global-navigation__icon:hover, .global-navigation__link[data-tracking-label="start-a-wiki"]:hover .global-navigation__icon {
	color: var(--discord-text);
	background-color: var(--discord-success);
}

/* Change border radius on hover, based on Discord server list */
.global-navigation__links .global-navigation__icon {
	transition: border-color 250ms ease, color 250ms ease, background-color 250ms ease, border-radius 250ms ease;
}

.global-navigation__links .global-navigation__icon:hover, .global-navigation__link:hover .global-navigation__icon, .global-navigation__links .wds-dropdown:hover .global-navigation__icon {
	border-radius: 33%;
}

/*** Dropdowns ***/
.global-navigation .wds-dropdown:not(.notifications .wds-dropdown) {
	--fandom-dropdown-background-color: var(--discord-background-tertiary);
	--fandom-border-color: var(--fandom-dropdown-background-color);
	--fandom-text-color: var(--discord-text);
	--fandom-link-color: var(--discord-text);
	--fandom-link-color--fadeout: var(--discord-accent-dark);
}

/*** Notifications ***/
.global-navigation .notifications {
	--fandom-border-color: var(--discord-background-primary);
	--fandom-text-color: var(--discord-text);
	--fandom-link-color: var(--discord-accent-secondary);
	--fandom-link-color--hover: var(--discord-accent-secondary);
	--fandom-accent-color: var(--discord-accent);
	--fandom-accent-color--hover: var(--discord-accent-secondary);
	--fandom-accent-label-color: var(--discord-text);
	--fandom-notifications-background-color: var(--discord-background-primary);
	--fandom-dropdown-background-color: var(--discord-background-tertiary);
	--fandom-notifications-read-card-background-color: var(--discord-background-secondary);
	--fandom-notifications-unread-card-background-color: var(--discord-background-primary);
	--fandom-notifications-footer-text-color: var(--discord-text);
}

/* Tabs */
.global-navigation .notifications .wds-tabber .wds-tabs__tab:not(.wds-is-current) {
	color: var(--discord-text-muted);
}

.global-navigation .notifications .wds-tabs__tab-label > span {
	background-color: var(--fandom-global-nav-counter-background-color);
	color: var(--fandom-global-nav-counter-label-color);
}

/* Cards */
.global-navigation .notifications [class*="NotificationCard-module_card__"] {
	--fandom-border-color: var(--discord-background-accent);
}

.global-navigation .notifications [class*="NotificationCard-module_card__"] [class^="NotificationCard-module_unreadStatusDot__"] {
	--fandom-link-color: var(--discord-ping);
}

/*** Search ***/
.search-modal {
	--fandom-text-color: var(--discord-text);
	--fandom-dropdown-background-color: var(--discord-background-primary);
	--fandom-border-color: var(--fandom-dropdown-background-color);
	--fandom-accent-color: var(--discord-accent);
	--fandom-accent-color--hover: var(--discord-accent-dark);
	--fandom-accent-label-color: var(--discord-text);
	--fandom-link-color: var(--discord-link);
	--fandom-link-color--fadeout: var(--discord-background-accent);
}

/*** Global footer ***/
.global-footer, .global-footer__section-header {
	background-color: var(--discord-background-secondary);
	color: var(--discord-text);
}

.global-footer__link, .global-footer__link:active, .global-footer__link:focus, .global-footer__link:visited,
.global-footer__bottom a, .global-footer__bottom a:visited {
	color: var(--discord-accent-secondary);
}

.global-footer__link:hover, .global-footer__bottom a:hover, .global-footer__section-social-links .global-footer__link-icon:hover {
	color: var(--discord-accent-dark);
}

.global-footer__section-social-links .global-footer__link-icon{
	color: inherit;
}

.global-footer__bottom {
	background-color: inherit;
}

/*** QuickBar ***/
#WikiaBar {
	--theme-accent-color: var(--discord-background-primary);
	--theme-accent-label-color: var(--discord-text);
}

#WikiaBar .tools > li {
	border-color: var(--discord-text-muted);
}

#WikiaBar .wds-dropdown__content {
	--wds-dropdown-background-color: var(--discord-background-tertiary);
	--wds-dropdown-border-color: var(--wds-dropdown-background-color);
	--wds-dropdown-text-color: var(--discord-text);
	--wds-dropdown-linked-item-color: var(--wds-dropdown-text-color);
	--wds-dropdown-linked-item-background-color: var(--discord-accent-dark);
}

#WikiaBar .wds-dropdown:before, #WikiaBar .wds-dropdown:after {
	border-top-color: var(--discord-background-tertiary)
}

/*** Scrollbar ***/
::-webkit-scrollbar-track {
	background-color: var(--discord-background-primary);
}

::-webkit-scrollbar-thumb {
	background-color: var(--discord-background-tertiary);
	border-radius: 10px;
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-corner {
	background-color: var(--discord-background-primary);
}