// ╔════════════════════════════════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗
// ║ Discord Addon                                                                                                      ║
// ╠══════════════════════════╦═════════════════════════════════════════════════════════════════════════════════════════╣
// ║ Theme:                   ║ Context Icons                                                                           ║
// ║ Author:                  ║ CorellanStoma#1996                                                                      ║
// ║ Support:                 ║ https://discord.gg/8W8E39Z                                                              ║
// ╠══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╣
// ║                                                                                                                    ║
// ║ Context Icons adds icons to the discord context menu's.                                                            ║
// ║ This Project was created by CorellanStoma#1996.                                                                    ║
// ║                                                                                                                    ║
// ╚════════════════════════════════════════════════════════════════════════════════════════════════════════════════════╝

// 🧪 Experimental
// ✔️ Activated by default
// ❌ Disabled by default
// ⚠️ Do not touch!

// ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗
// ║ SRC                      ║ Do not comment out these lines! By disabling the theme can not work correctly.          ║
// ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝

@use "src/source"; // ⚠️ Warning!! Do not disable it!

// ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗
// ║ Plugins                  ║ Do not comment out these lines! By disabling the theme can not work correctly.          ║
// ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝

@use "modules/plugins/powercord"; // ✔️ This loads the Powercord plugin customizations.

@use "modules/plugins/betterdiscord"; // ✔️ This loads the BetterDiscord plugin customizations.

// ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗
// ║ General                  ║ Here you can make general adjustments.                                                  ║
// ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝

:root {
  --context-icon-size: 21px;
  --context-menu-width: fit-content;
  --context-menu-radius: 8px;
  --context-menu-spacing: 0px;
  --context-button-radius: 4px;
  --context-icon-spacing: 8px;
  --context-settings-height: 60vh;
  --context-disabled-opacity: 0.3;

  --separator-spacing-height: 4px;
  --separator-spacing-width: 2px;

  --danger-background-radius: 4px;
  --slider-background-radius: 4px;
}

// ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗
// ║ Dark                     ║ Here you can make some adjustments for the dark theme.                                  ║
// ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝

.theme-dark {
  --context-icon-normal: var(--interactive-normal);
  --context-icon-focused: white;
  --context-text-normal: var(--interactive-normal);
  --context-text-focused: white;
  --context-separator: var(--background-secondary-alt);

  --slider-icon-color: var(--interactive-normal);
  --slider-bar-color: var(--interactive-normal);
  --slider-graber-color: var(--interactive-normal);
  --slider-background-normal: var(--background-tertiary);
  --slider-background-hover: var(--background-secondary-alt);

  --danger-icon-normal: hsl(359,calc(var(--saturation-factor, 1)*82.6%),59.4%);
  --danger-icon-focused: white;
  --danger-text-normal: hsl(359,calc(var(--saturation-factor, 1)*82.6%),59.4%);
  --danger-text-focused: white;
  --danger-background-normal: transparent;
  --danger-background-hover: hsl(359,calc(var(--saturation-factor, 1)*82.6%),59.4%);
}

// ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗
// ║ Light                    ║ These are the variables for the Light theme.                                            ║
// ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝

.theme-light {
  --context-icon-normal: var(--interactive-normal);
  --context-icon-focused: white;
  --context-text-normal: var(--interactive-normal);
  --context-text-focused: white;
  --context-separator: var(--background-secondary-alt);

  --slider-icon-color: var(--interactive-normal);
  --slider-bar-color: var(--interactive-normal);
  --slider-graber-color: var(--interactive-normal);
  --slider-background-normal: var(--background-tertiary);
  --slider-background-hover: var(--background-secondary-alt);

  --danger-icon-normal: hsl(359,calc(var(--saturation-factor, 1)*82.6%),59.4%);
  --danger-icon-focused: white;
  --danger-text-normal: hsl(359,calc(var(--saturation-factor, 1)*82.6%),59.4%);
  --danger-text-focused: white;
  --danger-background-normal: transparent;
  --danger-background-hover: hsl(359,calc(var(--saturation-factor, 1)*82.6%),59.4%);
}