/* ==UserStyle==

@name				Stylus Dracula
@namespace			https://github.com/Himither
@homepageURL		https://github.com/Himither/Stylus-Dracula
@supportURL			https://github.com/Himither/Stylus-Dracula/issues
@version			1.17.0
@updateURL			https://raw.githubusercontent.com/Himither/Stylus-Dracula/master/stylus-dracula.user.css
@description		Improved dracula theme covering the whole extension instead of just the editor
@author				Himither
@license			MIT
@preprocessor		stylus

@var checkbox		firacode-font			"Use Fira Code in editor"		0
@var range			firacode-weight			"Adjust font weight"			[500, 100, 900, 100, ""]
@var checkbox		scrollbars				"Hide all scrollbars"			0

==/UserStyle== */
@-moz-document regexp("chrome-extension://.*"),
regexp("moz-extension://.*"),
regexp("^\\w+-extension://.+") {
	:root {
		/* https://draculatheme.com/contribute#color-palette */
		--background: #282A36;
		--currentLine: #44475A;
		--foreground: #F8F8F2;
		--comment: #6272A4;
		--cyan: #8BE9FD;
		--green: #50FA7B;
		--orange: #FFB86C;
		--pink: #FF79C6;
		--purple: #BD93F9;
		--red: #FF5555;
		--yellow: #F1FA8C;
		--fg: var(--foreground);
		--bg: var(--background);

		/* Turns out you can right-click inspect extension popups in Google Chrome, unlike in Firefox... */
		--cmin: var(--orange); /* Hovered labels belonging to active styles */
		--c00: var(--fg); /* ??? */
		--c10: var(--fg); /* ??? */
		--c20: var(--fg); /* ??? */
		--c30: var(--orange); /* Hovered labels belonging to unactive styles */
		--c40: var(--fg); /* Icons i:hover, .i.info and .i-config */
		--c45: var(--comment); /* Checked non-slider checkboxes */
		--c50: var(--currentLine); /* Disabled label, style result borders & header-resize borders an */
		--c60: var(--currentLine); /* Disabled styles, their labels and options border */
		--c65: var(--foreground); /* Style order number in the popup */
		--c70: var(--bg); /* Color of background gradient for popup -> Find Styles */
		--c75: var(--currentLine); /* Scrollbar & manage page section hover dotted underline */
		--c80: var(--currentLine); /* Dotted borders */
		--c85: var(--bg); /* Some horizontal borders and gradient atbottom of find styles*/
		--c90: var(--bg); /* Options footer */
		--c95: var(--currentLine); /* Find styles top gradient and unhovered style footer */
		--c97: var(--bg); /* #header (sidemenu of editor) background */
		--c98: var(--bg); /* Editor background */
		--c99: var(--red); /* ??? */
		--c100: var(--red); /* ??? */
		--cmax: var(--red); /* ??? */
		--accent-1: var(--green); /* Checkbox mark for user css on manage page */
		--accent-2: var(--green); /* Checked slider checkbox know thumb */
		--accent-3: var(--red); /* ??? */
		--gold1: var(--purple); /* ??? */
		--radius: 4px;
		--radius2x: 8px;

		--spacing: 4px;
		--spacing2x: 8px;
	}

	/* ------------------------------------------------------ General */
	*::selection {
		color: var(--bg);
		background-color: var(--pink);
	}

	if firacode-font {
		:root .single-editor *:not(i) {
			font-family: "Fira Code", monospace;
			font-optical-sizing: auto;
			font-weight: firacode-weight;
		}
	}

	if scrollbars {
		#stylus,
		#stylus * {
			scrollbar-width: none;
		}
	}

	.split-btn-menu {
		border-radius: var(--radius);
		border-color: var(--currentLine);
		box-shadow: none;
	}

	.split-btn-menu a:hover {
		background-color: transparent;
	}

	#stylus :is(a, button) {
		cursor: pointer;
	}

	#stylus .split-btn > button:has(+ button) {
		border-radius: var(--radius) 0 0 var(--radius);
	}

	#stylus .split-btn > button + button {
		border-radius: 0 var(--radius) var(--radius) 0;
		margin-left: 0 !important; /* Must be !important */
	}

	#stylus div#header {
		box-shadow: none;
	}

	#stylus #header-resizer {
		opacity: 0.25;
		color: var(--currentLine);
	}

	#stylus #header-resizer:active {
		opacity: 1;
	}

	/* ------------------------------------------------------ Extension Popup */
	#stylus:has(#message-box) {
		height: 600px; /* 600px is the max height, this only applies when open the config of a style*/
	}

	#stylus:has(#message-box) {
		height: 600px; /* 600px is the max height, this only applies when open the config of a style*/
	}

	#stylus-popup {
		width: 800px !important; /* 800px is the max width of the popup, !important to overwrite inline style  */
		max-width: unset !important;
	}

	#stylus-popup #message-box.config-dialog > div {
		opacity: 1;
		box-shadow: none;
		width: 100%;
		height: 100%;
		max-width: 100%;
		max-height: 100%;
	}

	#stylus-popup #message-box.config-dialog > div > :is(#message-box-title, #message-box-buttons) {
		border-radius: 0;
	}

	#stylus-popup #options-btn svg {
		height: 16px;
	}

	#stylus-popup .search-result {
		box-shadow: none;
	}

	#stylus-popup #options-btn:hover svg {
		color: var(--pink);
	}

	#stylus-popup .config-body label:not(:first-child) {
		border-top: transparent;
		padding-top: var(--spacing);
	}

	#stylus-popup #search-results {
		background: none;
	}

	#stylus-popup .search-result {
		background-color: var(--currentLine);
	}

	#stylus-popup .search-result:hover {
		border-color: var(--comment);
	}

	.search-result-meta {
		justify-content: space-evenly;
	}

	#stylus-popup :is(.search-result-info, #stylus-popup .search-result-screenshot) {
		border-radius: var(--radius);
	}

	#stylus-popup .search-result-meta::before {
		border-radius: 0 0 var(--radius) var(--radius);
	}

	#stylus-popup .search-result [data-type] {
		background-color: transparent;
	}

	#stylus-popup #menu.delete > div {
		border-color: var(--red);
	}

	#stylus-popup #menu.delete header {
		background: var(--red);
	}

	/* ------------------------------------------------------ Edit Page */
	#stylus-edit details#options section.aligned {
		display: flex;
		flex-direction: column;
		row-gap: var(--spacing);
	}

	#stylus-edit details#options section.aligned > div {
		display: flex;
		justify-content: space-between;
	}

	#stylus-edit details#options section.aligned > div > div {
		margin-left: auto;
		order: 1;
	}

	#stylus-edit section#usw-data {
		display: flex;
		flex-direction: column;
	}

	#stylus-edit section#usw-data > div {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	#stylus-edit section#usw-data > div > input {
		width: 50%;
	}

	#stylus-edit div:is(.CodeMirror-active, #stylus-edit .CodeMirror-focused, #stylus-edit .search-target-editor) {
		box-shadow: none;
	}

	#stylus-edit div.section > div.CodeMirror {
		margin: var(--spacing2x) 0;
		border-radius: var(--radius);
	}

	#stylus-edit div.resize-grip,
	#stylus-edit div.resize-grip::after {
		color: var(--currentLine);
	}

	#stylus-edit div.CodeMirror-gutter-background {
		background-color: var(--currentLine);
	}

	#stylus-edit .CodeMirror-linenumber {
		color: var(--currentLine);
	}

	#stylus-edit .CodeMirror-linenumber:hover,
	#stylus-edit .CodeMirror-activeline .CodeMirror-linenumber {
		color: var(--fg);
	}

	#stylus-edit div.CodeMirror-activeline-background {
		background-color: var(--currentLine);
	}

	/* ------------------------------------------------------ Mangage Page */
	#stylus-manage #manage-settings {
		padding: 0 var(--spacing);
	}

	#stylus-manage #filters > #stats {
		border-radius: var(--radius);
		background-color: var(--orange);
		color: var(--bg);

		& > a > i {
			color: var(--red);
			border-radius: var(--radius);

			&:hover {
				background-color: var(--currentLine)
			}
		}
	}

	#stylus-manage summary h2 {
		border-bottom: none;
	}

	#stylus-manage #filters-stats {
		color: var(--currentLine);
		background-color: var(--orange);
		border-color: var(--orange);
		border-radius: var(--radius);
	}

	#stylus-manage .filter-selection {
		margin-bottom: var(--spacing);
	}

	#stylus-manage .filter-selection select {
		box-sizing: border-box;
		border: 1px solid transparent;
	}

	#stylus-manage .filter-selection:hover,
	#stylus-manage #filters label {
		background-color: transparent;
	}

	#stylus-manage .filter-selection .select-wrapper {
		left: 28px;
	}

	#stylus-manage #search-wrapper input {
		border-radius: var(--radius) 0 0 var(--radius);
	}

	#stylus-manage #search-wrapper select {
		border-radius: 0 var(--radius) var(--radius) 0;
		margin-left: 3px;
	}

	#stylus-manage #manage-text {
		margin-top: var(--spacing);
		display: flex;
		flex-direction: column;
		row-gap: var(--spacing);
	}

	#stylus-manage #manage-text span::after {
		content: "";
	}

	#stylus-manage #message-box #message-box-contents {
		box-shadow: none;
	}

	/* Style injection order bottom text */
	#stylus-manage #message-box #message-box-contents section[data-prio] header {
		background-color: var(--orange);
		color: var(--bg);
	}

	/* ------------------------------------------------------ Install Page */
	#stylus h2.install-show {
		color: var(--pink);
	}

	/* ------------------------------------------------------ Dialog, Modal */
	#stylus #message-box > div,
	#stylus div#help-popup,
	#stylus body#stylus-options {
		opacity: 0.95;
		border-radius: var(--radius2x);
	}

	#stylus #message-box-title,
	#stylus #help-popup > div.title,
	#stylus body#stylus-options header {
		background-color: var(--currentLine);
		border-radius: var(--radius2x) var(--radius2x) 0 0;
	}

	#stylus div#message-box.danger > div > div#message-box-title {
		background-color: var(--red);
	}

	#stylus body#stylus-options {
		border-color: transparent;
	}

	#stylus body#stylus-options header {
		border-bottom-color: transparent;
		min-width: 700px;
	}

	#stylus body#stylus-options div.block {
		padding-top: var(--spacing2x);
		padding-bottom: var(--spacing2x);
	}

	#stylus body#stylus-options div.items {
		display: flex;
		flex-direction: column;
		row-gap: var(--spacing);
	}

	#stylus body#stylus-options div.items label span:nth-child(2):not(:has(+ input)),
	#stylus body#stylus-options div.items label input:nth-child(3) {
		margin-left: auto;
	}

	#stylus body#stylus-options div.items span:not(.sync-status) {
		order: 0;
	}

	#stylus body#stylus-options div.actions button.connect {
		border-radius: var(--radius) 0 0 var(--radius);
	}

	#stylus body#stylus-options div.actions button.connect + button {
		border-radius: 0 var(--radius) var(--radius) 0;
	}

	#stylus body#stylus-options #FOUC {
		color: var(--bg);
		background-color: var(--orange);
	}

	#stylus body#stylus-options footer {
		border-radius: 0 0 var(--radius2x) var(--radius2x);
	}

	#stylus #message-box-buttons {
		background-color: var(--bg);
		border-radius: 0 0 var(--radius2x) var(--radius2x);
	}

	#stylus div#search-replace-dialog {
		padding-top: 0.75em;
		border-radius: 0 0 var(--radius2x) var(--radius2x);
		border-color: transparent;
	}

	#stylus div#search-replace-dialog > div {
		padding-left: 0.75em;
	}

	#stylus #search-replace-dialog a:hover {
		text-decoration: none;
	}

	#stylus #search-replace-dialog [data-action="case"][data-enabled]::after {
		border-color: var(--cyan);
	}

	#stylus div#search-replace-dialog div[data-type="status"] {
		border-radius: 0 0 var(--radius2x) var(--radius2x);
	}

	#stylus div#search-replace-dialog textarea {
		box-shadow: none;
		border-radius: var(--radius);
	}

	#stylus #search-replace-dialog > div {
		background-color: var(--bg);
	}

	/* ------------------------------------------------------ Buttons, Inputs, Textareas, Selects, Summaries */
	#stylus input,
	#stylus button,
	#stylus select,
	#stylus textarea {
		border-radius: var(--radius);
	}

	#stylus input:not([type="checkbox"]),
	#stylus button,
	#stylus select {
		background-color: var(--currentLine);
	}

	#stylus select,
	#stylus input:not([type="checkbox"]),
	#stylus textarea {
		border-color: transparent;
	}

	#stylus input:not([disabled]):hover,
	#stylus label input[type="checkbox"]:not([disabled]):hover,
	#stylus select:not([disabled]):hover {
		background-color: var(--currentLine) !important;
		border-color: var(--comment) !important;
		box-shadow: none;
	}

	#stylus button:not([disabled]):hover {
		background-color: var(--currentLine);
		border-color: var(--comment);
		box-shadow: none;
	}

	/* Input */
	#stylus input:not([disabled]):focus,
	#stylus select:not([disabled]):focus {
		box-shadow: none;
	}

	#stylus :is([type="checkbox"], #stylus [type="radio"]):not(:checked):not(.slider) {
		background-color: var(--bg);
		border-color: var(--currentLine);
	}

	#stylus input[type="range"] {
		cursor: pointer;
		appearance: none;
		height: var(--spacing2x) !important;
		border-color: transparent;
	}

	#stylus input[type="range"]:hover {
		border-color: transparent;
	}

	#stylus input[type="range"]::-webkit-slider-thumb,
	#stylus input[type="range"]::-moz-range-thumb {
		cursor: e-resize;
		box-sizing: border-box;
		width: 12px;
		height: 12px;
		background-color: var(--purple);
		border-color: var(--purple);
	}

	#stylus label:has(:is(input, #stylus select):hover) {
		color: var(--orange);
	}

	#stylus input[type="radio"]:checked::after {
		background-color: var(--orange);
	}

	#stylus input.slider {
		cursor: pointer;
		height: var(--spacing2x);
		box-shadow: none;
	}

	#stylus input.slider::after {
		box-shadow: none !important; /* Not !important to keep using accent-2 :checked */
		border-color: var(--currentLine);
	}

	#stylus input.slider:checked::after {
		border-color: transparent;
	}

	/* Buttons */
	#stylus button {
		background-image: unset !important; /* No fugly gradients, needs to be important */
	}

	#stylus button.install:hover {
		color: var(--cyan);
	}

	#stylus button#save-button:not([disabled]) {
		background-color: var(--purple);
		border-color: transparent;
	}

	#stylus button#save-button:not([disabled]):hover {
		background-color: var(--purple);
		color: var(--fg);
		border-color: transparent;
	}

	#stylus button#save-button:not([disabled]) + button.split-btn-pedal {
		background-color: var(--purple);
		border-color: transparent;
	}

	#stylus button#save-button:not([disabled]) + button.split-btn-pedal:hover {
		color: var(--fg);
	}

	/* Reset, Cancel & Delete Buttons */
	#stylus button:is(.delete, #reset, .reset, [data-cmd="default"], [data-cmd="delete"]):not([disabled]),
	#stylus-manage #message-box:not(:is(.help-text, .note, .injection-order, .config-dialog)) button ~ button:last-child {
		color: var(--red) !important;
	}

	#stylus #stylus-popup button[data-cmd="delete"] {
		border-color: transparent;
	}

	#stylus button:is(.delete, #reset, .reset, [data-cmd="default"], [data-cmd="delete"]):not([disabled]):hover,
	#stylus-manage #message-box:not(:is(.help-text, .note, .injection-order, .config-dialog)) button ~ button:last-child:hover {
		border-color: var(--red) !important;
	}

	#stylus div#message-box.danger button[data-focused-via-click] {
		background-color: var(--red) !important;
	}

	#stylus div#message-box.danger button[data-focused-via-click]:hover {
		border-color: white !important;
	}

	/* Summaries*/
	#stylus body#stylus-manage summary h2 {
		vertical-align: sub !important;
	}

	#stylus details#publish summary::marker,
	#stylus details#publish summary h2 {
		color: var(--fg) !important;
	}

	#stylus summary:hover,
	#stylus details#publish summary:hover h2,
	#stylus details#publish:has(summary:hover) summary::marker {
		color: var(--pink) !important;
	}

	/* ------------------------------------------------------ Links */
	#stylus a,
	#stylus #toc li {
		color: var(--cyan);
		text-decoration: none;
	}

	#stylus a:not(:has(i)):not(.injection-order-toggle):hover,
	#stylus #toc li:hover {
		color: var(--cyan);
		text-decoration: underline;
	}

	#stylus #toc li:hover {
		background-color: var(--currentLine);
		border-radius: var(--radius);
	}

	/* ------------------------------------------------------ Icons */
	#stylus i,
	#stylus #usercss-wiki i.i-external {
		color: var(--fg);
	}

	#stylus i:hover:not(.i-usercss),
	#stylus a:hover i:not(.i-close),
	#stylus a#usercss-wiki:hover i.i-external {
		color: var(--pink);
	}

	#stylus a#usercss-wiki:hover i {
		filter: unset;
	}

	#stylus i.i-close,
	#stylus i.i-close:hover,
	#stylus a.remove-applies-to:hover i.i-minus {
		color: var(--red);
	}

	#stylus a.add-applies-to:hover i.i-plus {
		color: var(--green);
	}

	#stylus a.injection-order-toggle::after {
		color: var(--yellow);
	}

	#stylus a.injection-order-toggle:hover::after {
		color: var(--yellow);
	}
}