Dracula for Brave by druxorey

/* ==UserStyle==
@name             Dracula for Brave
@namespace        github.com/druxorey/dracula-for-stylus
@version          1.1.2
@description      Are you tired of the same boring colors on Brave? Then try this modern color style based on the Dracula theme
@author           Druxorey
@license          GNU General Public License v3.0
@preprocessor     less
@var select dracula-style "Style" {
  "Dark": "dark",
  "Light": "light",
}
==/UserStyle== */

@-moz-document domain("search.brave.com") {

	:root {
		--color-dark-background-1: #525568;
		--color-dark-background-2: #44475A;
		--color-dark-background-3: #353747;
		--color-dark-background-4: #282A36;
		--color-dark-background-5: #21222C;

		--color-dark-shadow-1: #353747;
		--color-dark-shadow-2: #21222C;
		--color-dark-shadow-3: #1A1C24;

		--color-dark-foreground-1: #F8F8F2;
		--color-dark-foreground-2: #E3E3E2;
		--color-dark-foreground-3: #C6C7CC;

		--color-light-foreground-3: #44475A;
		--color-light-foreground-2: #282A36;
		--color-light-foreground-1: #21222C;

		--color-light-background-5: #F3F4F6;
		--color-light-background-4: #E8E8EE;
		--color-light-background-3: #DCDDE5;
		--color-light-background-2: #D0D2DC;
		--color-light-background-1: #C4C7D4;

		--color-light-shadow-1: #DCDDE5;
		--color-light-shadow-2: #C4C7D4;
		--color-light-shadow-3: #B2B5C2;

		--color-comment: #6272A4;

		--color-red-1: #FF6E6E;
		--color-red-2: #FF5555;
		--color-red-3: #E63C3C;
		--color-orange-1: #FFD185;
		--color-orange-2: #FFB86C;
		--color-orange-3: #E69F53;
		--color-yellow-1: #FFFFA5;
		--color-yellow-2: #F1FA8C;
		--color-yellow-3: #D8E173;
		--color-green-1: #69FF94;
		--color-green-2: #50FA7B;
		--color-green-3: #37EB62;
		--color-cyan-1: #A4FFFF;
		--color-cyan-2: #8BE9FD;
		--color-cyan-3: #72D0E4;
		--color-blue-1: #6DCCFF;
		--color-blue-2: #54B3FF;
		--color-blue-3: #3B9AE6;
		--color-purple-1: #D6ACFF;
		--color-purple-2: #BD93F9;
		--color-purple-3: #A47AE0;
		--color-pink-1: #FF92DF;
		--color-pink-2: #FF79C6;
		--color-pink-3: #E660AD;

		--color-accent-1: #BD93F9;
		--color-accent-2: #BD93F944;
		--color-important-1: #FF79C6;
		--color-important-2: #FF79C644;
	}

	body {
		--color-page-background: e("var(--color-@{dracula-style}-background-4)");
		--color-serp-bar-bg: e("var(--color-@{dracula-style}-background-5)");
		--color-serp-breadcrumbs: e("var(--color-@{dracula-style}-foreground-3)");;
		--color-serp-container-:e("var(--color-@{dracula-style}-background-4)");
		--color-serp-container-interactive: e("var(--color-@{dracula-style}-background-2)");
		--color-serp-divider-subtle-container:e("var(--color-@{dracula-style}-background-2)");
		--color-serp-header-background: e("var(--color-@{dracula-style}-background-4)");
		--color-serp-highlight-background: e("var(--color-@{dracula-style}-background-2)");
        --color-serp-settings-background:e("var(--color-@{dracula-style}-background-3)");
		--color-serp-snippet-background: e("var(--color-@{dracula-style}-background-5)");

		--color-text-primary: e("var(--color-@{dracula-style}-foreground-1)");
		--color-text-secondary: e("var(--color-@{dracula-style}-foreground-1)");
		--color-text-tertiary: e("var(--color-@{dracula-style}-foreground-2)");
		--color-text-interactive: var(--color-accent-1);

		--color-link-default: var(--color-accent-1);
		--color-link-visited: var(--color-comment);

		--color-icon-default: var(--color-red-2);
		--color-icon-disabled: var(--color-red-3);

		--color-container-background: e("var(--color-@{dracula-style}-background-5)");
		--color-divider-subtle: e("var(--color-@{dracula-style}-background-2)");

        --elevation-05: 0px 8px 36px -2px e("var(--color-@{dracula-style}-shadow-3)"), 0px 1px 0px 0px var(--elevation-primary);
        --elevation-01: 0px 1px 4px 0px e("var(--color-@{dracula-style}-shadow-3)"), 0px 1px 0px 0px var(--elevation-primary);
	}

	.snippet.svelte-qm0fz7 {
		transition: 0.25s ease;
	}
	.snippet.svelte-qm0fz7:hover {
		text-shadow: 0 0 0.005rem e("var(--color-@{dracula-style}-foreground-1)");
		transition: 0.25s ease;
	}
	.llm-output, .svelte-43tr6t {
		color: e("var(--color-@{dracula-style}-foreground-1)");
	}

    #searchform-actions.svelte-7tdohb.svelte-7tdohb:before {
        background:none;
    }

	:root:not(.light) {
        #searchform-actions.svelte-7tdohb.svelte-7tdohb:before {
        background:none;
    	}
		.llm-output {
			--highlight-color: var(--color-accent-2);
		}
		.bottom-fade.svelte-h9rkzz {
			background: linear-gradient(0deg,e("var(--color-@{dracula-style}-background-5)") var(--offset, 1rem),rgba(255,255,255,0))
		}
		.button.type--footer-prominent.svelte-19i47us.svelte-19i47us:not(:disabled):not([disabled=true]):hover,
		.button.type--footer-prominent:not(:disabled):not([disabled=true]).active.svelte-19i47us.svelte-19i47us {
			background:e("var(--color-@{dracula-style}-background-4)");
		}
	}
}