themes.css

body {
  margin: 0;
  min-block-size: 100vh;
  color: var(--primary-text-color);
  background-color: var(--bg-color);

  /*
    This works because CSS variables are just a find and replace and
    are replaced before the expressions are evaluated
  */
  --accent-color: rgb(var(--accent-color-rgb));
  --accent-color-opacity1: rgb(var(--accent-color-rgb) / 4%);
  --accent-color-opacity2: rgb(var(--accent-color-rgb) / 12%);
  --accent-color-opacity3: rgb(var(--accent-color-rgb) / 16%);
  --accent-color-opacity4: rgb(var(--accent-color-rgb) / 24%);

  /* divider */

  --primary-input-color: rgb(0 0 0 / 50%);
  --link-color: var(--accent-color);
  --link-visited-color: var(--accent-color-visited);
  --instance-menu-color: var(--search-bar-color);
  --red-500: #f44336;
  --top-bar-push-down-adjustment-default: -35px;

  /* Value of 0 without 'px' does not work inside calc() */
  /* stylelint-disable length-zero-no-unit */
  --top-bar-push-down-adjustment-no-description: 0px;
  --top-bar-push-down-adjustment-edit-mode: 0px;
  --top-bar-push-down-adjustment-one-or-fewer: 0px;
  /* stylelint-enable length-zero-no-unit */

  --destructive-color: #f44336;
  --destructive-text-color: #000;
  --destructive-hover-color: #e53935;
  --destructive-active-color: #c62828;

  /* For the 'About' page, show the logo with the primary text color by default */
  --logo-primary-color: var(--primary-text-color);
  --logo-secondary-color: var(--primary-text-color);
  --logo-tertiary-color: var(--primary-text-color);
}

/*************** RULE TWEAKS ***************/

/* Default sidenav hover text color and primary input color not needed to be changed for most themes */
/* stylelint-disable-next-line selector-no-qualifying-type */
body:not(.hotPink) {
  --primary-input-color: rgb(0 0 0 / 50%);
  --side-nav-hover-text-color: var(--primary-text-color);
}

/* Default side nav active text color and scrollbar text color hover not needed to be changed for most themes */
/* stylelint-disable-next-line selector-no-qualifying-type */
body:not(.hotPink, .pastelPink) {
  --side-nav-active-text-color: var(--primary-text-color);
  --scrollbar-text-color-hover: var(--primary-text-color);
}

/* Themes that use the main FreeTube logo */
.system[data-system-theme*='light'],
.light,
.system[data-system-theme*='dark'],
.dark,
.black {
  --logo-icon: url('../../_icons/iconColorSmall.svg');
  --logo-text: url('../../_icons/textColorSmall.svg');
  --logo-primary-color: #f33;
  --logo-secondary-color: #29abe1;
  --logo-tertiary-color: #000;
}

/* Text "app" should be visible but retain FreeTube color logo */
.system[data-system-theme*='dark'],
.dark,
.black {
  --logo-tertiary-color: #fff;
}

/* Given that the Hot Pink theme does not need link underlining due to meeting
WCAG 2 Level AA (https://webaim.org/resources/linkcontrastchecker/?fcolor=FFFFFF&bcolor=DE1C85&lcolor=000000),
it can be safely elided. This looks quite pleasant on this theme. */
.hotPink a:not(:hover, :focus),
.hotPink .navOption:hover,
.hotPink .navOption:focus,
.hotPink *:not(:hover, :focus) {
  text-decoration: none;
}

.hotPink a:hover,
.hotPink a:focus {
  text-decoration: underline;
}

.hotPink .shaka-range-container {
  --primary-color: #fff;
}


/*************** DARK THEME ADJUSTMENTS ***************/

/* stylelint-disable no-descending-specificity */

/* Dark theme Youtube and Invidious logo styling (in FtShareButton) */
.system[data-system-theme*='dark'],
.dark,
.dracula,
.catppuccinMocha,
.hotPink,
.nordic,
.solarizedDark,
.gruvboxDark,
.catppuccinFrappe,
.everforestDarkHard,
.everforestDarkMedium,
.everforestDarkLow {
  --primary-shadow-color: rgb(0 0 0 / 75%);

  .invidiousLogo {
    background-image: url('./assets/img/invidious-logo-dark.svg');
  }

  .youtubeLogo {
    filter: brightness(0.868);
  }
}

.black .youtubeLogo {
  filter: brightness(0.933);
}

.black .invidiousLogo {
  background-image: url('./assets/img/invidious-logo-dark.svg');
}


/*************** LIGHT THEME ADJUSTMENTS ***************/

/* Light shadow color for themes where a dark shadow would not work */
.pastelPink,
.everforestLightHard,
.everforestLightMedium,
.everforestLightLow,
.gruvboxLight,
.solarizedLight,
.catppuccinLatte {
  --primary-shadow-color: rgb(255 255 255 / 75%);
}

/* Light theme Youtube and Invidious logo styling (in FtShareButton) */
.invidiousLogo {
  background-image: url('./assets/img/invidious-logo-light.svg');
}

.youtubeLogo {
  filter: invert(0.87);
}

/* stylelint-enable no-descending-specificity */


/*************** MAIN THEME DEFINITIONS ***************/

/*
  IMPLEMENTATION NOTE:
  When adding a new base theme, add that --bg-color to src/main/index.js.
*/

.system[data-system-theme*='light'],
.light {
  --primary-text-color: #212121;
  --secondary-text-color: #424242;
  --tertiary-text-color: #757575;
  --primary-shadow-color: rgb(200 200 200 / 75%);
  --title-color: #3f7ac6;
  --bg-color: #f1f1f1;
  --favorite-icon-color: #0c0;
  --card-bg-color: #fff;
  --secondary-card-bg-color: #eee;
  --scrollbar-color: #ccc;
  --scrollbar-color-hover: #bdbdbd;
  --side-nav-color: #fff;
  --side-nav-hover-color: #e0e0e0;
  --side-nav-active-color: #757575;
  --search-bar-color: #f5f5f5;
}

.system[data-system-theme*='dark'],
.dark {
  --primary-text-color: #eee;
  --secondary-text-color: #ddd;
  --tertiary-text-color: #999;
  --title-color: #eee;
  --bg-color: #212121;
  --favorite-icon-color: #0f0;
  --card-bg-color: #303030;
  --secondary-card-bg-color: rgb(0 0 0 / 75%);
  --scrollbar-color: #414141;
  --scrollbar-color-hover: #757575;
  --side-nav-color: #262626;
  --side-nav-hover-color: #212121;
  --side-nav-active-color: #303030;
  --search-bar-color: #262626;
}

.black {
  --primary-text-color: #eee;
  --secondary-text-color: #ddd;
  --tertiary-text-color: #eee;
  --title-color: #eee;
  --bg-color: #000;
  --favorite-icon-color: #0f0;
  --card-bg-color: #000;
  --secondary-card-bg-color: rgb(0 0 0 / 75%);
  --scrollbar-color: #515151;
  --scrollbar-color-hover: #424242;
  --side-nav-color: #000;
  --side-nav-hover-color: #212121;
  --side-nav-active-color: #303030;
  --search-bar-color: #262626;
}

.nordic {
  --primary-text-color: #eee;
  --secondary-text-color: #ddd;
  --tertiary-text-color: #eee;
  --title-color: #eee;
  --bg-color: #2b2f3a;
  --favorite-icon-color: #0f0;
  --card-bg-color: #2e3440;
  --secondary-card-bg-color: rgb(59 66 82 / 75%);
  --scrollbar-color: #4b566a;
  --scrollbar-color-hover: #4b566a;
  --side-nav-color: #2e3440;
  --side-nav-hover-color: #3b4252;
  --side-nav-active-color: #3b4252;
  --search-bar-color: #4b566a;
  --logo-icon: url('../../_icons/iconNordicLightSmall.svg');
  --logo-text: url('../../_icons/textNordicLightSmall.svg');
}

.hotPink {
  --primary-text-color: #ffff;
  --secondary-text-color: #ffff;
  --tertiary-text-color: #ffff;
  --title-color: #000;
  --bg-color: #ff008a;
  --favorite-icon-color: #0f0;
  --card-bg-color: #de1c85;
  --secondary-card-bg-color: rgb(0 0 0 / 75%);
  --scrollbar-color: #fff;
  --scrollbar-color-hover: #c0f6ff;
  --scrollbar-text-color-hover: #000;
  --side-nav-color: #ee1e90;
  --side-nav-hover-color: #fff;
  --side-nav-hover-text-color: #000;
  --side-nav-active-color: #959595;
  --side-nav-active-text-color: #000;
  --search-bar-color: #9c2d5d;
  --logo-icon: url('../../_icons/iconWhiteSmall.svg');
  --logo-text: url('../../_icons/textWhiteSmall.svg');

  /* The hot pink theme does not have a great color contrast with
  many other colors than black and white. This means that the primary and
  secondary theme colors are forced here to be black so as to avoid any
  accessibility concerns. */
  --primary-color: #000 !important;
  --primary-color-hover: #000 !important;
  --primary-color-active: #000 !important;
  --text-with-main-color: #fff !important;
  --text-with-accent-color: #fff !important;
  --accent-color: #000 !important;
  --accent-color-hover: #808080 !important;
  --accent-color-active: #6a739a !important;
  --accent-color-light: #000 !important;
  --accent-color-visited: #000 !important;
  --accent-color-opacity1: rgb(0 0 0 / 4%) !important;
  --accent-color-opacity2: rgb(0 0 0 / 12%) !important;
  --accent-color-opacity3: rgb(255 255 255 / 16%) !important;
  --accent-color-opacity4: rgb(255 255 255 / 24%) !important;
}

.pastelPink {
  --primary-text-color: #1f002b;
  --secondary-text-color: #361836;
  --tertiary-text-color: #5a285a;
  --title-color: #185eb4;
  --bg-color: #ffeadd;
  --favorite-icon-color: #760278;
  --card-bg-color: #ffd1dc;
  --secondary-card-bg-color: #fff;
  --scrollbar-color: #f5c8d3;
  --scrollbar-color-hover: #760278;
  --scrollbar-text-color-hover: var(--scrollbar-color);
  --side-nav-color: #ffd1dc;
  --side-nav-hover-color: #cef4f1;
  --side-nav-active-color: #3124e7;
  --side-nav-active-text-color: #ffff;
  --search-bar-color: #fff0dd;
  --logo-icon: url('../../_icons/iconBlackSmall.svg');
  --logo-text: url('../../_icons/textBlackSmall.svg');
}

.catppuccinMocha {
  --primary-text-color: #cdd6f4;
  --secondary-text-color: #bac2de;
  --tertiary-text-color: #a6adc8;
  --title-color: #cdd6f4;
  --bg-color: #1e1e2e;
  --favorite-icon-color: #0f0;
  --card-bg-color: #181825;
  --secondary-card-bg-color: #1e1e2e;
  --scrollbar-color: #313244;
  --scrollbar-color-hover: #3d4051;
  --side-nav-color: #181825;
  --side-nav-hover-color: #11111b;
  --side-nav-active-color: #11111b;
  --search-bar-color: #313244;
  --logo-icon: url('../../_icons/iconCatppuccinMochaLightSmall.svg');
  --logo-text: url('../../_icons/textCatppuccinMochaLightSmall.svg');
}

/* Fix owner comment contrast - secondary-card-bg-color (#1e1e2e) has only 1.07:1 contrast with card-bg-color (#181825). Use Surface1 (#45475a) for improved visibility (1.92:1) while maintaining text readability (6.30:1). See #6597 */
.catppuccinMocha .commentOwner {
  background-color: #45475a;
}

.dracula {
  --primary-text-color: #f8f8f2;
  --secondary-text-color: #c6cee6;
  --tertiary-text-color: #e5e8f3;
  --title-color: #bd93f9;
  --bg-color: #282a36;
  --favorite-icon-color: #0f0;
  --card-bg-color: #33353f;
  --secondary-card-bg-color: #282a36;
  --scrollbar-color: #44475a;
  --scrollbar-color-hover: #3d4051;
  --side-nav-color: #33353f;
  --side-nav-hover-color: #57596b;
  --side-nav-active-color: #3d4051;
  --search-bar-color: #3e3f4a;
  --logo-icon: url('../../_icons/iconDraculaLightSmall.svg');
  --logo-text: url('../../_icons/textDraculaLightSmall.svg');
}

.solarizedDark {
  --primary-text-color: #fdf6e3;
  --secondary-text-color: #ddd6c3;
  --tertiary-text-color: #ddd6c3;
  --title-color: #fdf6e3;
  --bg-color: #002b36;
  --favorite-icon-color: #0f0;
  --card-bg-color: #204b56;
  --secondary-card-bg-color: #102b36;
  --scrollbar-color: #608b96;
  --scrollbar-color-hover: #406b76;
  --side-nav-color: #204b56;
  --side-nav-hover-color: #608b96;
  --side-nav-active-color: #406b76;
  --search-bar-color: #073642;
  --logo-icon: url('../../_icons/iconSolarizedLightSmall.svg');
  --logo-text: url('../../_icons/textSolarizedLightSmall.svg');
}

.solarizedLight {
  --primary-text-color: #002b36;
  --secondary-text-color: #204b56;
  --tertiary-text-color: #204b56;
  --title-color: #002b36;
  --bg-color: #fdf6e3;
  --favorite-icon-color: #0f0;
  --card-bg-color: #eee8d5;
  --secondary-card-bg-color: #fdf6e3;
  --scrollbar-color: #a9a895;
  --scrollbar-color-hover: #839496;
  --side-nav-color: #eee8d5;
  --side-nav-hover-color: #fdf6e3;
  --side-nav-active-color: #839496;
  --search-bar-color: #c9c8b5;
  --logo-icon: url('../../_icons/iconSolarizedDarkSmall.svg');
  --logo-text: url('../../_icons/textSolarizedDarkSmall.svg');
}

.gruvboxDark {
  --primary-text-color: #ebdbb2;
  --secondary-text-color: #d5c4a1;
  --tertiary-text-color: #d5c4a1;
  --title-color: #ebdbb2;
  --bg-color: #282828;
  --favorite-icon-color: #0f0;
  --card-bg-color: #504945;
  --secondary-card-bg-color: #3c3836;
  --scrollbar-color: #665c54;
  --scrollbar-color-hover: #282828;
  --side-nav-color: #504945;
  --side-nav-hover-color: #665c54;
  --side-nav-active-color: #504945;
  --search-bar-color: #1d2021;
  --logo-icon: url('../../_icons/iconGruvboxLightSmall.svg');
  --logo-text: url('../../_icons/textGruvboxLightSmall.svg');
}

.gruvboxLight {
  --primary-text-color: #3c3836;
  --secondary-text-color: #282828;
  --tertiary-text-color: #282828;
  --title-color: #3c3836;
  --bg-color: #fbf1c7;
  --favorite-icon-color: #0f0;
  --card-bg-color: #ebdbb2;
  --secondary-card-bg-color: #d5c4a1;
  --scrollbar-color: #bdae93;
  --scrollbar-color-hover: #fbf1c7;
  --side-nav-color: #ebdbb2;
  --side-nav-hover-color: #bdae93;
  --side-nav-active-color: #ebdbb2;
  --search-bar-color: #a89984;
  --logo-icon: url('../../_icons/iconGruvboxDarkSmall.svg');
  --logo-text: url('../../_icons/textGruvboxDarkSmall.svg');
}

.catppuccinFrappe {
  --primary-text-color: #c6d0f5;
  --secondary-text-color: #c6d0f5;
  --tertiary-text-color: #a5adce;
  --title-color: #c6d0f5;
  --bg-color: #303446;
  --favorite-icon-color: #0f0;
  --card-bg-color: #292c3c;
  --secondary-card-bg-color: #303446;
  --scrollbar-color: #414559;
  --scrollbar-color-hover: #515569;
  --side-nav-color: #292c3c;
  --side-nav-hover-color: #232634;
  --side-nav-active-color: #232634;
  --search-bar-color: #414559;
  --logo-icon: url('../../_icons/iconCatppuccinFrappeLightSmall.svg');
  --logo-text: url('../../_icons/textCatppuccinFrappeLightSmall.svg');
}

.everforestDarkHard {
  --primary-text-color: #d3c6aa;
  --secondary-text-color: #d3c6aa;
  --tertiary-text-color: #d3c6aa;
  --title-color: #d3c6aa;
  --bg-color: #272e33;
  --favorite-icon-color: #0f0;
  --card-bg-color: #1e2326;
  --secondary-card-bg-color: #272e33;
  --scrollbar-color: #394146;
  --scrollbar-color-hover: #3f4b48;
  --side-nav-color: #1e2326;
  --side-nav-hover-color: #0e1316;
  --side-nav-active-color: #0e1316;
  --search-bar-color: #2e383c;
  --logo-icon: url('../../_icons/iconEverforestLightHardSmall.svg');
  --logo-text: url('../../_icons/textEverforestLightHardSmall.svg');
}

.everforestDarkMedium {
  --primary-text-color: #d3c6aa;
  --secondary-text-color: #d3c6aa;
  --tertiary-text-color: #d3c6aa;
  --title-color: #d3c6aa;
  --bg-color: #2d353b;
  --favorite-icon-color: #0f0;
  --card-bg-color: #232a2e;
  --secondary-card-bg-color: #2d353b;
  --scrollbar-color: #3f484e;
  --scrollbar-color-hover: #46534f;
  --side-nav-color: #232a2e;
  --side-nav-hover-color: #131a1e;
  --side-nav-active-color: #131a1e;
  --search-bar-color: #343f44;
  --logo-icon: url('../../_icons/iconEverforestLightMediumSmall.svg');
  --logo-text: url('../../_icons/textEverforestLightMediumSmall.svg');
}

.everforestDarkLow {
  --primary-text-color: #d3c6aa;
  --secondary-text-color: #d3c6aa;
  --tertiary-text-color: #d3c6aa;
  --title-color: #d3c6aa;
  --bg-color: #333c43;
  --favorite-icon-color: #0f0;
  --card-bg-color: #293136;
  --secondary-card-bg-color: #333c43;
  --scrollbar-color: #454f56;
  --scrollbar-color-hover: #4d5b56;
  --side-nav-color: #293136;
  --side-nav-hover-color: #192126;
  --side-nav-active-color: #192126;
  --search-bar-color: #3a464c;
  --logo-icon: url('../../_icons/iconEverforestLightLowSmall.svg');
  --logo-text: url('../../_icons/textEverforestLightLowSmall.svg');
}

.everforestLightHard {
  --primary-text-color: #3c4a52;
  --secondary-text-color: #3c4a52;
  --tertiary-text-color: #3c4a52;
  --title-color: #3c4a52;
  --bg-color: #fffbef;
  --favorite-icon-color: #0f0;
  --card-bg-color: #f2efdf;
  --secondary-card-bg-color: #fffbef;
  --scrollbar-color: #d8d5c5;
  --scrollbar-color-hover: #aeb5a2;
  --side-nav-color: #f2efdf;
  --side-nav-hover-color: #e2dfcf;
  --side-nav-active-color: #e2dfcf;
  --search-bar-color: #f8f5e4;
  --logo-icon: url('../../_icons/iconEverforestDarkHardSmall.svg');
  --logo-text: url('../../_icons/textEverforestDarkHardSmall.svg');
}

.everforestLightMedium {
  --primary-text-color: #3c4a52;
  --secondary-text-color: #3c4a52;
  --tertiary-text-color: #3c4a52;
  --title-color: #3c4a52;
  --bg-color: #fdf6e3;
  --favorite-icon-color: #0f0;
  --card-bg-color: #efe8d4;
  --secondary-card-bg-color: #fdf6e3;
  --scrollbar-color: #d0ccb7;
  --scrollbar-color-hover: #adb39f;
  --side-nav-color: #efe8d4;
  --side-nav-hover-color: #dfd8c4;
  --side-nav-active-color: #dfd8c4;
  --search-bar-color: #f4f0d9;
  --logo-icon: url('../../_icons/iconEverforestDarkMediumSmall.svg');
  --logo-text: url('../../_icons/textEverforestDarkMediumSmall.svg');
}

.everforestLightLow {
  --primary-text-color: #3c4a52;
  --secondary-text-color: #3c4a52;
  --tertiary-text-color: #3c4a52;
  --title-color: #3c4a52;
  --bg-color: #f3ead3;
  --favorite-icon-color: #0f0;
  --card-bg-color: #eee8ce;
  --secondary-card-bg-color: #f3ead3;
  --scrollbar-color: #c8c3aa;
  --scrollbar-color-hover: #a9b09b;
  --side-nav-color: #eee8ce;
  --side-nav-hover-color: #d5cfb5;
  --side-nav-active-color: #d5cfb5;
  --search-bar-color: #eae4ca;
  --logo-icon: url('../../_icons/iconEverforestDarkLowSmall.svg');
  --logo-text: url('../../_icons/textEverforestDarkLowSmall.svg');
}

.catppuccinLatte {
  --primary-text-color: #4c4f69;
  --secondary-text-color: #4c4f69;
  --tertiary-text-color: #6c6f85;
  --title-color: #4c4f69;
  --bg-color: #eff1f5;
  --favorite-icon-color: #0f0;
  --card-bg-color: #e6e9ef;
  --secondary-card-bg-color: #eff1f5;
  --scrollbar-color: #ccd0da;
  --scrollbar-color-hover: #bdbdbd;
  --side-nav-color: #e6e9ef;
  --side-nav-hover-color: #dce0e8;
  --side-nav-active-color: #dce0e8;
  --search-bar-color: #ccd0da;
  --logo-icon: url('../../_icons/iconCatppuccinLatteDarkSmall.svg');
  --logo-text: url('../../_icons/textCatppuccinLatteDarkSmall.svg');
}

/*************** PRIMARY THEME COLOR DEFINTIONS ***************/

.mainRed,
.mainPink,
.mainPurple,
.mainDeepPurple,
.mainIndigo,
.mainBlue,
.mainLightBlue,
.mainCyan,
.mainTeal,
.mainGreen {
  --text-with-main-color: #fff;
  --logo-icon-bar-color: url('../../_icons/iconWhiteSmall.svg');
  --logo-text-bar-color: url('../../_icons/textWhiteSmall.svg');
}

/* light primary theme colors */
.mainLightGreen,
.mainLime,
.mainYellow,
.mainAmber,
.mainOrange,
.mainDeepOrange {
  --text-with-main-color: #000;
  --logo-icon-bar-color: url('../../_icons/iconBlackSmall.svg');
  --logo-text-bar-color: url('../../_icons/textBlackSmall.svg');
}

.mainRed {
  --primary-color: #f44336;
  --primary-color-hover: #e53935;
  --primary-color-active: #c62828;
}

.mainPink {
  --primary-color: #e91e63;
  --primary-color-hover: #d81b60;
  --primary-color-active: #ad1457;
}

.mainPurple {
  --primary-color: #9c27b0;
  --primary-color-hover: #8e24aa;
  --primary-color-active: #6a1b9a;
}

.mainDeepPurple {
  --primary-color: #673ab7;
  --primary-color-hover: #5e35b1;
  --primary-color-active: #4527a0;
}

.mainIndigo {
  --primary-color: #3f51b5;
  --primary-color-hover: #3949ab;
  --primary-color-active: #283593;
}

.mainBlue {
  --primary-color: #2196f3;
  --primary-color-hover: #1e88e5;
  --primary-color-active: #1565c0;
}

.mainLightBlue {
  --primary-color: #03a9f4;
  --primary-color-hover: #039be5;
  --primary-color-active: #0277bd;
}

.mainCyan {
  --primary-color: #00bcd4;
  --primary-color-hover: #00acc1;
  --primary-color-active: #00838f;
}

.mainTeal {
  --primary-color: #009688;
  --primary-color-hover: #00897b;
  --primary-color-active: #00695c;
}

.mainGreen {
  --primary-color: #4caf50;
  --primary-color-hover: #43a047;
  --primary-color-active: #2e7d32;
}

.mainLightGreen {
  --primary-color: #8bc34a;
  --primary-color-hover: #7cb342;
  --primary-color-active: #558b2f;
}

.mainLime {
  --primary-color: #cddc39;
  --primary-color-hover: #c0ca33;
  --primary-color-active: #9e9d24;
}

.mainYellow {
  --primary-color: #ffeb3b;
  --primary-color-hover: #fdd835;
  --primary-color-active: #f9a825;
}

.mainAmber {
  --primary-color: #ffc107;
  --primary-color-hover: #ffb300;
  --primary-color-active: #ff8f00;
}

.mainOrange {
  --primary-color: #ff9800;
  --primary-color-hover: #fb8c00;
  --primary-color-active: #ef6c00;
}

.mainDeepOrange {
  --primary-color: #ff5722;
  --primary-color-hover: #f4511e;
  --primary-color-active: #d84315;
}


/* PRIMARY THEME COLORS CORRESPONDING TO BASE THEMES */

.mainCatppuccinMochaRosewater,
.mainCatppuccinMochaFlamingo,
.mainCatppuccinMochaPink,
.mainCatppuccinMochaMauve,
.mainCatppuccinMochaRed,
.mainCatppuccinMochaMaroon,
.mainCatppuccinMochaPeach,
.mainCatppuccinMochaYellow,
.mainCatppuccinMochaGreen,
.mainCatppuccinMochaTeal,
.mainCatppuccinMochaSky,
.mainCatppuccinMochaSapphire,
.mainCatppuccinMochaBlue,
.mainCatppuccinMochaLavender {
  --text-with-main-color: #1e1e2e;
  --logo-icon-bar-color: url('../../_icons/iconCatppuccinMochaDarkSmall.svg');
  --logo-text-bar-color: url('../../_icons/textCatppuccinMochaDarkSmall.svg');
}

.mainCatppuccinMochaRosewater {
  --primary-color: #f5e0dc;
  --primary-color-hover: #fceeec;
  --primary-color-active: #e1c8c3;
}

.mainCatppuccinMochaFlamingo {
  --primary-color: #f2cdcd;
  --primary-color-hover: #f2e1e1;
  --primary-color-active: #ddb7b7;
}

.mainCatppuccinMochaPink {
  --primary-color: #f5c2e7;
  --primary-color-hover: #f3d2ea;
  --primary-color-active: #dca3cd;
}

.mainCatppuccinMochaMauve {
  --primary-color: #cba6f7;
  --primary-color-hover: #d4b7f8;
  --primary-color-active: #b38fdf;
}

.mainCatppuccinMochaRed {
  --primary-color: #f38ba8;
  --primary-color-hover: #f0a4b9;
  --primary-color-active: #de7693;
}

.mainCatppuccinMochaMaroon {
  --primary-color: #eba0ac;
  --primary-color-hover: #eabbc3;
  --primary-color-active: #d68895;
}

.mainCatppuccinMochaPeach {
  --primary-color: #fab387;
  --primary-color-hover: #f7c7a9;
  --primary-color-active: #e1996d;
}

.mainCatppuccinMochaYellow {
  --primary-color: #f9e2af;
  --primary-color-hover: #feeecd;
  --primary-color-active: #dec48d;
}

.mainCatppuccinMochaGreen {
  --primary-color: #a6e3a1;
  --primary-color-hover: #bfebbb;
  --primary-color-active: #86c780;
}

.mainCatppuccinMochaTeal {
  --primary-color: #94e2d5;
  --primary-color-hover: #aceae0;
  --primary-color-active: #6fc5b7;
}

.mainCatppuccinMochaSky {
  --primary-color: #89dceb;
  --primary-color-hover: #a3e4f0;
  --primary-color-active: #68bcca;
}

.mainCatppuccinMochaSapphire {
  --primary-color: #74c7ec;
  --primary-color-hover: #93d1ed;
  --primary-color-active: #59a9cf;
}

.mainCatppuccinMochaBlue {
  --primary-color: #89b4fa;
  --primary-color-hover: #a6c8ff;
  --primary-color-active: #6593df;
}

.mainCatppuccinMochaLavender {
  --primary-color: #b4befe;
  --primary-color-hover: #c9d0ff;
  --primary-color-active: #8d98e4;
}

.mainDraculaCyan,
.mainDraculaGreen,
.mainDraculaOrange,
.mainDraculaRed,
.mainDraculaYellow {
  --text-with-main-color: #282a36;
  --logo-icon-bar-color: url('../../_icons/iconDraculaDarkSmall.svg');
  --logo-text-bar-color: url('../../_icons/textDraculaDarkSmall.svg');
}

.mainDraculaPink,
.mainDraculaPurple {
  --text-with-main-color: #f8f8f2;
  --logo-icon-bar-color: url('../../_icons/iconDraculaLightSmall.svg');
  --logo-text-bar-color: url('../../_icons/textDraculaLightSmall.svg');
}

.mainDraculaCyan {
  --primary-color: #8be9fd;
  --primary-color-hover: #97ebfd;
  --primary-color-active: #7dd2e4;
}

.mainDraculaGreen {
  --primary-color: #50fa7b;
  --primary-color-hover: #62fb88;
  --primary-color-active: #48e16f;
}

.mainDraculaOrange {
  --primary-color: #ffb86c;
  --primary-color-hover: #ffbf7b;
  --primary-color-active: #e6a661;
}

.mainDraculaPink {
  --primary-color: #ff79c6;
  --primary-color-hover: #ff86cc;
  --primary-color-active: #e66db2;
}

.mainDraculaPurple {
  --primary-color: #bd93f9;
  --primary-color-hover: #c49efa;
  --primary-color-active: #aa84e0;
}

.mainDraculaRed {
  --primary-color: #f55;
  --primary-color-hover: #f66;
  --primary-color-active: #e64d4d;
}

.mainDraculaYellow {
  --primary-color: #f1fa8c;
  --primary-color-hover: #f2fb98;
  --primary-color-active: #d9e17e;
}

.mainSolarizedYellow,
.mainSolarizedOrange,
.mainSolarizedRed,
.mainSolarizedMagenta,
.mainSolarizedViolet,
.mainSolarizedGreen {
  --text-with-main-color: #fdf6e3;
  --logo-icon-bar-color: url('../../_icons/iconDraculaLightSmall.svg');
  --logo-text-bar-color: url('../../_icons/textDraculaLightSmall.svg');
}

.mainSolarizedBlue,
.mainSolarizedCyan {
  --text-with-main-color: #000;
  --logo-icon-bar-color: url('../../_icons/iconDraculaDarkSmall.svg');
  --logo-text-bar-color: url('../../_icons/textDraculaDarkSmall.svg');
}

.mainSolarizedYellow {
  --primary-color: #b58900;
  --primary-color-hover: #d5a920;
  --primary-color-active: #f5c940;
}

.mainSolarizedOrange {
  --primary-color: #cb4b16;
  --primary-color-hover: #eb6b36;
  --primary-color-active: #fc8b56;
}

.mainSolarizedRed {
  --primary-color: #dc322f;
  --primary-color-hover: #fc524f;
  --primary-color-active: #fe726f;
}

.mainSolarizedMagenta {
  --primary-color: #d33682;
  --primary-color-hover: #f356a2;
  --primary-color-active: #f558c2;
}

.mainSolarizedViolet {
  --primary-color: #6c71c4;
  --primary-color-hover: #8c91e4;
  --primary-color-active: #acb1f4;
}

.mainSolarizedBlue {
  --primary-color: #268bd2;
  --primary-color-hover: #46abf2;
  --primary-color-active: #66cbf4;
}

.mainSolarizedCyan {
  --primary-color: #2aa198;
  --primary-color-hover: #4ac1b8;
  --primary-color-active: #6ae1d8;
}

.mainSolarizedGreen {
  --primary-color: #859900;
  --primary-color-hover: #a5b920;
  --primary-color-active: #c5d940;
}

.mainGruvboxDarkGreen {
  --primary-color: #b8bb26;
  --primary-color-hover: #d8db46;
  --primary-color-active: #f8fb66;
}

.mainGruvboxDarkYellow {
  --primary-color: #fabd2f;
  --primary-color-hover: #fcd54f;
  --primary-color-active: #fed76f;
}

.mainGruvboxDarkBlue {
  --primary-color: #83a598;
  --primary-color-hover: #a3c5b8;
  --primary-color-active: #c3e2d8;
}

.mainGruvboxDarkPurple {
  --primary-color: #d3869b;
  --primary-color-hover: #f3a6b8;
  --primary-color-active: #f3a6b8;
}

.mainGruvboxDarkAqua {
  --primary-color: #8ec07c;
  --primary-color-hover: #aec29c;
  --primary-color-active: #cec59c;
}

.mainGruvboxDarkOrange {
  --primary-color: #fe8019;
  --primary-color-hover: #fe9a39;
  --primary-color-active: #feb259;
}

.mainGruvboxLightRed {
  --primary-color: #9d0006;
  --primary-color-hover: #bd2026;
  --primary-color-active: #dd4046;
}

.mainGruvboxLightBlue {
  --primary-color: #076678;
  --primary-color-hover: #276898;
  --primary-color-active: #476ab8;
}

.mainGruvboxLightPurple {
  --primary-color: #8f3f71;
  --primary-color-hover: #af5f91;
  --primary-color-active: #cf7fb1;
}

.mainGruvboxLightOrange {
  --primary-color: #af3a03;
  --primary-color-hover: #cf5a23;
  --primary-color-active: #ef7a43;
}

.mainGruvboxLightOrange,
.mainGruvboxLightRed,
.mainGruvboxLightBlue,
.mainGruvboxLightPurple {
  --text-with-main-color: #fbf1c7;
  --logo-icon-bar-color: url('../../_icons/iconGruvboxLightSmall.svg');
  --logo-text-bar-color: url('../../_icons/textGruvboxLightSmall.svg');
}


.mainGruvboxDarkGreen,
.mainGruvboxDarkYellow,
.mainGruvboxDarkAqua,
.mainGruvboxDarkOrange {
  --text-with-main-color: #3c3836;
  --logo-icon-bar-color: url('../../_icons/iconGruvboxDarkSmall.svg');
  --logo-text-bar-color: url('../../_icons/textGruvboxDarkSmall.svg');
}

.mainGruvboxDarkBlue,
.mainGruvboxDarkPurple {
  --text-with-main-color: #1d2021;
  --logo-icon-bar-color: url('../../_icons/iconGruvboxDarkSmall.svg');
  --logo-text-bar-color: url('../../_icons/textGruvboxDarkSmall.svg');
}

.mainCatppuccinFrappeRosewater,
.mainCatppuccinFrappeFlamingo,
.mainCatppuccinFrappePink,
.mainCatppuccinFrappeMauve,
.mainCatppuccinFrappeRed,
.mainCatppuccinFrappeMaroon,
.mainCatppuccinFrappePeach,
.mainCatppuccinFrappeYellow,
.mainCatppuccinFrappeGreen,
.mainCatppuccinFrappeTeal,
.mainCatppuccinFrappeSky,
.mainCatppuccinFrappeSapphire,
.mainCatppuccinFrappeBlue,
.mainCatppuccinFrappeLavender {
  --text-with-main-color: #24273a;
  --logo-icon-bar-color: url('../../_icons/iconCatppuccinFrappeDarkSmall.svg');
  --logo-text-bar-color: url('../../_icons/textCatppuccinFrappeDarkSmall.svg');
}

.mainCatppuccinFrappeRosewater {
  --primary-color: #f2d5cf;
  --primary-color-hover: #f2e7e3;
  --primary-color-active: #e0bfb9;
}

.mainCatppuccinFrappeFlamingo {
  --primary-color: #eebebe;
  --primary-color-hover: #f0d0d0;
  --primary-color-active: #d8a0a0;
}

.mainCatppuccinFrappePink {
  --primary-color: #f4b8e4;
  --primary-color-hover: #f3c8e7;
  --primary-color-active: #e19abf;
}

.mainCatppuccinFrappeMauve {
  --primary-color: #ca9ee6;
  --primary-color-hover: #d4b0e7;
  --primary-color-active: #b37ac9;
}

.mainCatppuccinFrappeRed {
  --primary-color: #e78284;
  --primary-color-hover: #e99a9c;
  --primary-color-active: #d46b6d;
}

.mainCatppuccinFrappeMaroon {
  --primary-color: #ea999c;
  --primary-color-hover: #eab4b8;
  --primary-color-active: #d87c80;
}

.mainCatppuccinFrappePeach {
  --primary-color: #ef9f76;
  --primary-color-hover: #f7c0a0;
  --primary-color-active: #e18b5e;
}

.mainCatppuccinFrappeYellow {
  --primary-color: #e5c890;
  --primary-color-hover: #f0e9c0;
  --primary-color-active: #d8b790;
}

.mainCatppuccinFrappeGreen {
  --primary-color: #a6d189;
  --primary-color-hover: #bfe9b1;
  --primary-color-active: #86c77b;
}

.mainCatppuccinFrappeTeal {
  --primary-color: #81c8be;
  --primary-color-hover: #a3d4cc;
  --primary-color-active: #6fa9a0;
}

.mainCatppuccinFrappeSky {
  --primary-color: #99d1db;
  --primary-color-hover: #b3dce4;
  --primary-color-active: #6fa9a0;
}

.mainCatppuccinFrappeSapphire {
  --primary-color: #85c1dc;
  --primary-color-hover: #a3d0e4;
  --primary-color-active: #5a9ec6;
}

.mainCatppuccinFrappeBlue {
  --primary-color: #8caaee;
  --primary-color-hover: #9eb7f0;
  --primary-color-active: #6c8dbf;
}

.mainCatppuccinFrappeLavender {
  --primary-color: #babbf1;
  --primary-color-hover: #c9c9f3;
  --primary-color-active: #8a8abf;
}

.mainEverforestDarkRed,
.mainEverforestDarkOrange,
.mainEverforestDarkYellow,
.mainEverforestDarkGreen,
.mainEverforestDarkAqua,
.mainEverforestDarkBlue,
.mainEverforestDarkPurple,
.mainEverforestLightRed,
.mainEverforestLightOrange,
.mainEverforestLightYellow,
.mainEverforestLightGreen,
.mainEverforestLightAqua,
.mainEverforestLightBlue,
.mainEverforestLightPurple {
  --text-with-main-color: #1e2326;
  --logo-icon-bar-color: url('../../_icons/iconEverforestDarkHardSmall.svg');
  --logo-text-bar-color: url('../../_icons/textEverforestDarkHardSmall.svg');
}

.mainEverforestDarkRed {
  --primary-color: #e67e80;
  --primary-color-hover: #e89e9f;
  --primary-color-active: #d65f61;
}

.mainEverforestDarkOrange {
  --primary-color: #e69875;
  --primary-color-hover: #e8b095;
  --primary-color-active: #b96e4f;
}

.mainEverforestDarkYellow {
  --primary-color: #dbbc7f;
  --primary-color-hover: #ddcc9f;
  --primary-color-active: #bbae5f;
}

.mainEverforestDarkGreen {
  --primary-color: #a7c080;
  --primary-color-hover: #b9d09f;
  --primary-color-active: #8b9e5f;
}

.mainEverforestDarkAqua {
  --primary-color: #83c092;
  --primary-color-hover: #95d0b0;
  --primary-color-active: #6da07f;
}

.mainEverforestDarkBlue {
  --primary-color: #7fbbb3;
  --primary-color-hover: #91cbc3;
  --primary-color-active: #5f9b93;
}

.mainEverforestDarkPurple {
  --primary-color: #d699b6;
  --primary-color-hover: #e6b9d6;
  --primary-color-active: #b67a96;
}

.mainEverforestLightRed {
  --primary-color: #d83532;
  --primary-color-hover: #e84e3f;
  --primary-color-active: #b83232;
}

.mainEverforestLightOrange {
  --primary-color: #d55d0f;
  --primary-color-hover: #e66f10;
  --primary-color-active: #b64f00;
}

.mainEverforestLightYellow {
  --primary-color: #a96e00;
  --primary-color-hover: #c88b00;
  --primary-color-active: #8b6e00;
}

.mainEverforestLightGreen {
  --primary-color: #6d8100;
  --primary-color-hover: #8da101;
  --primary-color-active: #4f5f00;
}

.mainEverforestLightAqua {
  --primary-color: #25976c;
  --primary-color-hover: #46b38a;
  --primary-color-active: #0d7e51;
}

.mainEverforestLightBlue {
  --primary-color: #2a84b5;
  --primary-color-hover: #4aa2d3;
  --primary-color-active: #0a7ea5;
}

.mainEverforestLightPurple {
  --primary-color: #cf59aa;
  --primary-color-hover: #e77dc9;
  --primary-color-active: #a63f9a;
}

.mainCatppuccinLatteMauve,
.mainCatppuccinLatteRed {
  --text-with-main-color: #fff;
  --logo-icon-bar-color: url('../../_icons/iconCatppuccinLatteLightSmall.svg');
  --logo-text-bar-color: url('../../_icons/textCatppuccinLatteLightSmall.svg');
}

.mainCatppuccinLatteMauve {
  --primary-color: #8839ef;
  --primary-color-hover: #9f5cf1;
  --primary-color-active: #6c28ce;
}

.mainCatppuccinLatteRed {
  --primary-color: #d20f39;
  --primary-color-hover: #dd385c;
  --primary-color-active: #a60c2d;
}

/*************** SECONDARY THEME COLOR DEFINTIONS ***************/

/* dark secondary theme colors */
.secRed,
.secPink,
.secPurple,
.secDeepPurple,
.secIndigo,
.secBlue,
.secLightBlue,
.secCyan,
.secTeal,
.secGreen {
  --text-with-accent-color: #fff;
}

/* light secondary theme colors */
.secLightGreen,
.secLime,
.secYellow,
.secAmber,
.secOrange,
.secDeepOrange {
  --text-with-accent-color: #000;
}

.secRed {
  --accent-color-rgb: 244 67 54;
  --accent-color-hover: #e53935;
  --accent-color-active: #c62828;
  --accent-color-light: #ef9a9a;
  --accent-color-visited: #b71c1c;
}

.secPink {
  --accent-color-rgb: 233 30 99;
  --accent-color-hover: #d81b60;
  --accent-color-active: #ad1457;
  --accent-color-light: #f48fb1;
  --accent-color-visited: #880e4f;
}

.secPurple {
  --accent-color-rgb: 156 39 176;
  --accent-color-hover: #8e24aa;
  --accent-color-active: #6a1b9a;
  --accent-color-light: #ce93d8;
  --accent-color-visited: #4a148c;
}

.secDeepPurple {
  --accent-color-rgb: 103 58 183;
  --accent-color-hover: #5e35b1;
  --accent-color-active: #4527a0;
  --accent-color-light: #b39ddb;
  --accent-color-visited: #311b92;
}

.secIndigo {
  --accent-color-rgb: 63 81 181;
  --accent-color-hover: #3949ab;
  --accent-color-active: #283593;
  --accent-color-light: #9fa8da;
  --accent-color-visited: #1a237e;
}

.secBlue {
  --accent-color-rgb: 33 150 243;
  --accent-color-hover: #1e88e5;
  --accent-color-active: #1565c0;
  --accent-color-light: #90caf9;
  --accent-color-visited: #0d47a1;
}

.secLightBlue {
  --accent-color-rgb: 3 169 244;
  --accent-color-hover: #039be5;
  --accent-color-active: #0277bd;
  --accent-color-light: #81d4fa;
  --accent-color-visited: #01579b;
}

.secCyan {
  --accent-color-rgb: 0 188 212;
  --accent-color-hover: #00acc1;
  --accent-color-active: #00838f;
  --accent-color-light: #80deea;
  --accent-color-visited: #006064;
}

.secTeal {
  --accent-color-rgb: 0 150 136;
  --accent-color-hover: #00897b;
  --accent-color-active: #00695c;
  --accent-color-light: #80cbc4;
  --accent-color-visited: #004d40;
}

.secGreen {
  --accent-color-rgb: 76 175 80;
  --accent-color-hover: #43a047;
  --accent-color-active: #2e7d32;
  --accent-color-light: #a5d6a7;
  --accent-color-visited: #1b5e20;
}

.secLightGreen {
  --accent-color-rgb: 139 195 74;
  --accent-color-hover: #7cb342;
  --accent-color-active: #558b2f;
  --accent-color-light: #c5e1a5;
  --accent-color-visited: #33691e;
}

.secLime {
  --accent-color-rgb: 205 220 57;
  --accent-color-hover: #c0ca33;
  --accent-color-active: #9e9d24;
  --accent-color-light: #e6ee9c;
  --accent-color-visited: #827717;
}

.secYellow {
  --accent-color-rgb: 255 235 59;
  --accent-color-hover: #fdd835;
  --accent-color-active: #f9a825;
  --accent-color-light: #fff59d;
  --accent-color-visited: #f57f17;
}

.secAmber {
  --accent-color-rgb: 255 193 7;
  --accent-color-hover: #ffb300;
  --accent-color-active: #ff8f00;
  --accent-color-light: #ffe082;
  --accent-color-visited: #ff6f00;
}

.secOrange {
  --accent-color-rgb: 255 152 0;
  --accent-color-hover: #fb8c00;
  --accent-color-active: #ef6c00;
  --accent-color-light: #ffcc80;
  --accent-color-visited: #e65100;
}

.secDeepOrange {
  --accent-color-rgb: 255 87 34;
  --accent-color-hover: #f4511e;
  --accent-color-active: #d84315;
  --accent-color-light: #ffab91;
  --accent-color-visited: #bf360c;
}


/* SECONDARY THEME COLORS CORRESPONDING TO BASE THEMES */

.secCatppuccinMochaRosewater,
.secCatppuccinMochaFlamingo,
.secCatppuccinMochaPink,
.secCatppuccinMochaMauve,
.secCatppuccinMochaRed,
.secCatppuccinMochaMaroon,
.secCatppuccinMochaPeach,
.secCatppuccinMochaYellow,
.secCatppuccinMochaGreen,
.secCatppuccinMochaTeal,
.secCatppuccinMochaSky,
.secCatppuccinMochaSapphire,
.secCatppuccinMochaBlue,
.secCatppuccinMochaLavender {
  --text-with-accent-color: #1e1e2e;
}

.secCatppuccinMochaRosewater {
  --accent-color-rgb: 245 224 220;
  --accent-color-hover: #fceeec;
  --accent-color-active: #e1c8c3;
  --accent-color-light: #f8eae7;
  --accent-color-visited: #d3a197;
}

.secCatppuccinMochaFlamingo {
  --accent-color-rgb: 242 205 205;
  --accent-color-hover: #f3d7d7;
  --accent-color-active: #ddb7b7;
  --accent-color-light: #f7dfdf;
  --accent-color-visited: #cf9898;
}

.secCatppuccinMochaPink {
  --accent-color-rgb: 245 194 231;
  --accent-color-hover: #f3cee9;
  --accent-color-active: #dca3cd;
  --accent-color-light: #f4dbed;
  --accent-color-visited: #d28fc0;
}

.secCatppuccinMochaMauve {
  --accent-color-rgb: 203 166 247;
  --accent-color-hover: #d4b7f8;
  --accent-color-active: #b38fdf;
  --accent-color-light: #d6b9f9;
  --accent-color-visited: #a171da;
}

.secCatppuccinMochaRed {
  --accent-color-rgb: 243 139 168;
  --accent-color-hover: #f399b2;
  --accent-color-active: #de7693;
  --accent-color-light: #f5a3ba;
  --accent-color-visited: #d56c89;
}

.secCatppuccinMochaMaroon {
  --accent-color-rgb: 235 160 172;
  --accent-color-hover: #ebb4bd;
  --accent-color-active: #d68895;
  --accent-color-light: #f0b7c0;
  --accent-color-visited: #c86a79;
}

.secCatppuccinMochaPeach {
  --accent-color-rgb: 250 179 135;
  --accent-color-hover: #f7bd99;
  --accent-color-active: #e1996d;
  --accent-color-light: #fbc4a2;
  --accent-color-visited: #d78a5b;
}

.secCatppuccinMochaYellow {
  --accent-color-rgb: 249 226 175;
  --accent-color-hover: #f9e7bf;
  --accent-color-active: #dec48d;
  --accent-color-light: #fbeccb;
  --accent-color-visited: #d5b05d;
}

.secCatppuccinMochaGreen {
  --accent-color-rgb: 166 227 161;
  --accent-color-hover: #b6e3b2;
  --accent-color-active: #86c780;
  --accent-color-light: #bceab8;
  --accent-color-visited: #6ed166;
}

.secCatppuccinMochaTeal {
  --accent-color-rgb: 148 226 213;
  --accent-color-hover: #a1dfd5;
  --accent-color-active: #6fc5b7;
  --accent-color-light: #afe9df;
  --accent-color-visited: #5cccb9;
}

.secCatppuccinMochaSky {
  --accent-color-rgb: 137 220 235;
  --accent-color-hover: #99dfeb;
  --accent-color-active: #68bcca;
  --accent-color-light: #9fe3ef;
  --accent-color-visited: #64c2d3;
}

.secCatppuccinMochaSapphire {
  --accent-color-rgb: 116 199 236;
  --accent-color-hover: #84c7e6;
  --accent-color-active: #59a9cf;
  --accent-color-light: #93d4f0;
  --accent-color-visited: #6ab6d7;
}

.secCatppuccinMochaBlue {
  --accent-color-rgb: 137 220 235;
  --accent-color-hover: #9bbef6;
  --accent-color-active: #6593df;
  --accent-color-light: #a7c7fb;
  --accent-color-visited: #739cdd;
}

.secCatppuccinMochaLavender {
  --accent-color-rgb: 180 190 254;
  --accent-color-hover: #c9d0ff;
  --accent-color-active: #8d98e4;
  --accent-color-light: #d2d8fe;
  --accent-color-visited: #96a1e9;
}

.secDraculaCyan,
.secDraculaGreen,
.secDraculaOrange,
.secDraculaRed,
.secDraculaYellow {
  --text-with-accent-color: #212121;
}

.secDraculaPink,
.secDraculaPurple {
  --text-with-accent-color: #f8f8f2;
}

.secDraculaCyan {
  --accent-color-rgb: 139 233 253;
  --accent-color-hover: #97ebfd;
  --accent-color-active: #7dd2e4;
  --accent-color-light: #a2edfd;
  --accent-color-visited: #6fbaca;

}

.secDraculaGreen {
  --accent-color-rgb: 80 250 123;
  --accent-color-hover: #62fb88;
  --accent-color-active: #48e16f;
  --accent-color-light: #73fb95;
  --accent-color-visited: #40c862;
}

.secDraculaOrange {
  --accent-color-rgb: 255 184 108;
  --accent-color-hover: #ffbf7b;
  --accent-color-active: #e6a661;
  --accent-color-light: #ffc689;
  --accent-color-visited: #cc9356;
}

.secDraculaPink {
  --accent-color-rgb: 255 121 198;
  --accent-color-hover: #ff86cc;
  --accent-color-active: #e66db2;
  --accent-color-light: #ff94d1;
  --accent-color-visited: #cc619e;
}

.secDraculaPurple {
  --accent-color-rgb: 189 147 249;
  --accent-color-hover: #c49efa;
  --accent-color-active: #aa84e0;
  --accent-color-light: #caa9fa;
  --accent-color-visited: #9776c7;
}

.secDraculaRed {
  --accent-color-rgb: 255 85 85;
  --accent-color-hover: #f66;
  --accent-color-active: #e64d4d;
  --accent-color-light: #f77;
  --accent-color-visited: #c44;
}

.secDraculaYellow {
  --accent-color-rgb: 241 250 140;
  --accent-color-hover: #f2fb98;
  --accent-color-active: #d9e17e;
  --accent-color-light: #f4fba3;
  --accent-color-visited: #c1c870;
}

.secSolarizedYellow,
.secSolarizedOrange,
.secSolarizedRed,
.secSolarizedMagenta,
.secSolarizedViolet,
.secSolarizedGreen {
  --text-with-accent-color: #fdf6e3;
}

.secSolarizedBlue,
.secSolarizedCyan {
  --text-with-accent-color: #000;
}

.secSolarizedYellow {
  --accent-color-rgb: 165 165 0;
  --primary-color-hover: #a9a130;
  --accent-color-hover: #bb9f40;
  --accent-color-active: #897710;
  --accent-color-light: #dbc050;
  --accent-color-visited: #a9a130;
}

.secSolarizedOrange {
  --accent-color-rgb: 169 47 20;
  --primary-color-hover: #c94d34;
  --accent-color-hover: #db8140;
  --accent-color-active: #b35936;
  --accent-color-light: #eb8156;
  --accent-color-visited: #c94d34;
}

.secSolarizedRed {
  --accent-color-rgb: 186 16 29;
  --primary-color-hover: #d8302d;
  --accent-color-hover: #da504d;
  --accent-color-active: #b8282b;
  --accent-color-light: #fa726f;
  --accent-color-visited: #d8302d;
}

.secSolarizedMagenta {
  --accent-color-rgb: 176 20 96;
  --primary-color-hover: #d23480;
  --accent-color-hover: #dc5280;
  --accent-color-active: #b814a0;
  --accent-color-light: #fc5280;
  --accent-color-visited: #d23480;
}

.secSolarizedViolet {
  --accent-color-rgb: 78 83 164;
  --primary-color-hover: #6e83c4;
  --accent-color-hover: #8e77c4;
  --accent-color-active: #5e63e4;
  --accent-color-light: #ae95f4;
  --accent-color-visited: #6e83c4;
}

.secSolarizedBlue {
  --accent-color-rgb: 4 131 178;
  --primary-color-hover: #4899d2;
  --accent-color-hover: #469fd2;
  --accent-color-active: #2483d4;
  --accent-color-light: #66b1f4;
  --accent-color-visited: #4899d2;
}

.secSolarizedCyan {
  --accent-color-rgb: 8 135 118;
  --primary-color-hover: #2ca998;
  --accent-color-hover: #4cb9b8;
  --accent-color-active: #1c9788;
  --accent-color-light: #6ce1d8;
  --accent-color-visited: #2ca998;
}

.secSolarizedGreen {
  --accent-color-rgb: 101 119 0;
  --primary-color-hover: #857720;
  --accent-color-hover: #a59640;
  --accent-color-active: #837720;
  --accent-color-light: #c5d940;
  --accent-color-visited: #857720;
}

.secGruvboxDarkGreen {
  --accent-color-rgb: 152 151 26;
  --accent-color-hover: #b9b93a;
  --accent-color-active: #d9d95a;
  --accent-color-light: #b8bb26;
  --accent-color-visited: #98971a;
}

.secGruvboxDarkYellow {
  --accent-color-rgb: 215 153 33;
  --accent-color-hover: #f0b839;
  --accent-color-active: #f0b839;
  --accent-color-light: #fabd2f;
  --accent-color-visited: #d79921;
}

.secGruvboxDarkBlue {
  --accent-color-rgb: 69 133 136;
  --accent-color-hover: #68948a;
  --accent-color-active: #68948a;
  --accent-color-light: #83a598;
  --accent-color-visited: #458588;
}

.secGruvboxDarkPurple {
  --accent-color-rgb: 177 98 134;
  --accent-color-hover: #d3869b;
  --accent-color-active: #d3869b;
  --accent-color-light: #d3869b;
  --accent-color-visited: #b16286;
}

.secGruvboxDarkAqua {
  --accent-color-rgb: 104 157 106;
  --accent-color-hover: #8ec07c;
  --accent-color-active: #8ec07c;
  --accent-color-light: #8ec07c;
  --accent-color-visited: #689d6a;
}

.secGruvboxDarkOrange {
  --accent-color-rgb: 214 93 14;
  --accent-color-hover: #f2804f;
  --accent-color-active: #f2804f;
  --accent-color-light: #fe8019;
  --accent-color-visited: #d65d0e;
}

.secGruvboxLightRed {
  --text-with-accent-color: #fbf1c7;
  --accent-color-rgb: 204 36 29;
  --accent-color-hover: #d23c2a;
  --accent-color-active: #a61f1f;
  --accent-color-light: #fb4934;
  --accent-color-visited: #a61f1f;
}

.secGruvboxLightBlue {
  --accent-color-rgb: 69 133 136;
  --accent-color-hover: #68948a;
  --accent-color-active: #68948a;
  --accent-color-light: #83a598;
  --accent-color-visited: #458588;
}

.secGruvboxLightPurple {
  --accent-color-rgb: 177 98 134;
  --accent-color-hover: #d3869b;
  --accent-color-active: #d3869b;
  --accent-color-light: #d3869b;
  --accent-color-visited: #b16286;
}

.secGruvboxLightOrange {
  --accent-color-rgb: 214 93 14;
  --accent-color-hover: #f2804f;
  --accent-color-active: #f2804f;
  --accent-color-light: #fe8019;
  --accent-color-visited: #d65d0e;
}

.secGruvboxLightOrange,
.secGruvboxLightRed,
.secGruvboxLightBlue,
.secGruvboxLightPurple {
  --text-with-accent-color: #fbf1c7;
}

.secGruvboxDarkGreen,
.secGruvboxDarkYellow,
.secGruvboxDarkAqua,
.secGruvboxDarkOrange {
  --text-with-accent-color: #3c3836;
}

.secGruvboxDarkBlue,
.secGruvboxDarkPurple {
  --text-with-accent-color: #1d2021;
}

.secCatppuccinFrappeRosewater,
.secCatppuccinFrappeFlamingo,
.secCatppuccinFrappePink,
.secCatppuccinFrappeMauve,
.secCatppuccinFrappeRed,
.secCatppuccinFrappeMaroon,
.secCatppuccinFrappePeach,
.secCatppuccinFrappeYellow,
.secCatppuccinFrappeGreen,
.secCatppuccinFrappeTeal,
.secCatppuccinFrappeSky,
.secCatppuccinFrappeSapphire,
.secCatppuccinFrappeBlue,
.secCatppuccinFrappeLavender {
  --text-with-accent-color: #24273a;
}

.secCatppuccinFrappeRosewater {
  --accent-color-rgb: 243 214 223;
  --accent-color-hover: #f3e0e8;
  --accent-color-active: #e0bfcf;
  --accent-color-light: #f8e9f2;
  --accent-color-visited: #d3a1b3;
}

.secCatppuccinFrappeFlamingo {
  --accent-color-rgb: 239 191 191;
  --accent-color-hover: #f0c9c9;
  --accent-color-active: #dca8a8;
  --accent-color-light: #f7dada;
  --accent-color-visited: #cf8f8f;
}

.secCatppuccinFrappePink {
  --accent-color-rgb: 245 185 229;
  --accent-color-hover: #f5c5e9;
  --accent-color-active: #e0a0d0;
  --accent-color-light: #f8d4f0;
  --accent-color-visited: #d38cb7;
}

.secCatppuccinFrappeMauve {
  --accent-color-rgb: 203 159 231;
  --accent-color-hover: #d4b0e8;
  --accent-color-active: #b38fdf;
  --accent-color-light: #d6b9f9;
  --accent-color-visited: #a171da;
}

.secCatppuccinFrappeRed {
  --accent-color-rgb: 232 131 133;
  --accent-color-hover: #f08b8d;
  --accent-color-active: #d86f71;
  --accent-color-light: #f7a0a2;
  --accent-color-visited: #d86f71;
}

.secCatppuccinFrappeMaroon {
  --accent-color-rgb: 235 154 157;
  --accent-color-hover: #f0a1a4;
  --accent-color-active: #d88b8e;
  --accent-color-light: #f7b0b3;
  --accent-color-visited: #d88b8e;
}

.secCatppuccinFrappePeach {
  --accent-color-rgb: 255 175 119;
  --accent-color-hover: #ffbb8a;
  --accent-color-active: #e69e6b;
  --accent-color-light: #fc9;
  --accent-color-visited: #e69e6b;
}

.secCatppuccinFrappeYellow {
  --accent-color-rgb: 230 201 145;
  --accent-color-hover: #f0d8a1;
  --accent-color-active: #d8b07f;
  --accent-color-light: #f7e2b0;
  --accent-color-visited: #d8b07f;
}

.secCatppuccinFrappeGreen {
  --accent-color-rgb: 167 210 138;
  --accent-color-hover: #b7d28f;
  --accent-color-active: #87b96f;
  --accent-color-light: #bde6a0;
  --accent-color-visited: #6fc75f;
}

.secCatppuccinFrappeTeal {
  --accent-color-rgb: 130 201 191;
  --accent-color-hover: #92d0c6;
  --accent-color-active: #6eb5ab;
  --accent-color-light: #a0d6ce;
  --accent-color-visited: #6eb5ab;
}

.secCatppuccinFrappeSky {
  --accent-color-rgb: 154 210 220;
  --accent-color-hover: #a9d7e0;
  --accent-color-active: #7dbecb;
  --accent-color-light: #b4e6f0;
  --accent-color-visited: #6aaed0;
}

.secCatppuccinFrappeSapphire {
  --accent-color-rgb: 134 194 221;
  --accent-color-hover: #96c9e1;
  --accent-color-active: #6aaed0;
  --accent-color-light: #a0d4e6;
  --accent-color-visited: #6aaed0;
}

.secCatppuccinFrappeBlue {
  --accent-color-rgb: 141 171 239;
  --accent-color-hover: #9dbbef;
  --accent-color-active: #6b8fcf;
  --accent-color-light: #a7c1f4;
  --accent-color-visited: #6b8fcf;
}

.secCatppuccinFrappeLavender {
  --accent-color-rgb: 187 188 242;
  --accent-color-hover: #c4c5f2;
  --accent-color-active: #a8a9f2;
  --accent-color-light: #c7c8f2;
  --accent-color-visited: #9a9bf2;
}

.secEverforestDarkRed,
.secEverforestDarkOrange,
.secEverforestDarkYellow,
.secEverforestDarkGreen,
.secEverforestDarkAqua,
.secEverforestDarkBlue,
.secEverforestDarkPurple,
.secEverforestLightRed,
.secEverforestLightOrange,
.secEverforestLightYellow,
.secEverforestLightGreen,
.secEverforestLightAqua,
.secEverforestLightBlue,
.secEverforestLightPurple {
  --text-with-accent-color: #1e2326;
}

.secEverforestDarkRed {
  --accent-color-rgb: 230 126 128;
  --accent-color-hover: #e78b8d;
  --accent-color-active: #d66f71;
  --accent-color-light: #f68e90;
  --accent-color-visited: #d66f71;
}

.secEverforestDarkOrange {
  --accent-color-rgb: 230 152 117;
  --accent-color-hover: #e6a383;
  --accent-color-active: #d68360;
  --accent-color-light: #f6a885;
  --accent-color-visited: #d68360;
}

.secEverforestDarkYellow {
  --accent-color-rgb: 219 188 127;
  --accent-color-hover: #ddc98f;
  --accent-color-active: #c8a76b;
  --accent-color-light: #ebcc8f;
  --accent-color-visited: #c8a76b;
}

.secEverforestDarkGreen {
  --accent-color-rgb: 167 192 128;
  --accent-color-hover: #b1c98f;
  --accent-color-active: #8fa76b;
  --accent-color-light: #b7d090;
  --accent-color-visited: #8fa76b;
}

.secEverforestDarkAqua {
  --accent-color-rgb: 131 192 146;
  --accent-color-hover: #8dc99f;
  --accent-color-active: #6ba77b;
  --accent-color-light: #93d0a2;
  --accent-color-visited: #6ba77b;
}

.secEverforestDarkBlue {
  --accent-color-rgb: 127 187 179;
  --accent-color-hover: #8cc9c1;
  --accent-color-active: #6ba79f;
  --accent-color-light: #8fcbc3;
  --accent-color-visited: #6ba79f;
}

.secEverforestDarkPurple {
  --accent-color-rgb: 214 153 182;
  --accent-color-hover: #dca3c0;
  --accent-color-active: #c883a0;
  --accent-color-light: #e6a9c6;
  --accent-color-visited: #c883a0;
}

.secEverforestLightRed {
  --accent-color-rgb: 248 85 82;
  --accent-color-hover: #f96360;
  --accent-color-active: #e64441;
  --accent-color-light: #f97673;
  --accent-color-visited: #e64441;
}

.secEverforestLightOrange {
  --accent-color-rgb: 245 125 38;
  --accent-color-hover: #f68b34;
  --accent-color-active: #e66f10;
  --accent-color-light: #f79f5a;
  --accent-color-visited: #e66f10;
}

.secEverforestLightYellow {
  --accent-color-rgb: 223 160 0;
  --accent-color-hover: #e0ad0e;
  --accent-color-active: #c88b00;
  --accent-color-light: #f0c000;
  --accent-color-visited: #c88b00;
}

.secEverforestLightGreen {
  --accent-color-rgb: 141 161 1;
  --accent-color-hover: #9dbf0f;
  --accent-color-active: #7b8f00;
  --accent-color-light: #a5d000;
  --accent-color-visited: #7b8f00;
}

.secEverforestLightAqua {
  --accent-color-rgb: 53 167 124;
  --accent-color-hover: #46b38a;
  --accent-color-active: #24a569;
  --accent-color-light: #5ad0a0;
  --accent-color-visited: #24a569;
}

.secEverforestLightBlue {
  --accent-color-rgb: 58 148 197;
  --accent-color-hover: #4aa2d3;
  --accent-color-active: #2881b2;
  --accent-color-light: #5ab0e0;
  --accent-color-visited: #2881b2;
}

.secEverforestLightPurple {
  --accent-color-rgb: 223 105 186;
  --accent-color-hover: #e77dc9;
  --accent-color-active: #c84f9a;
  --accent-color-light: #f09ed0;
  --accent-color-visited: #c84f9a;
}

.secCatppuccinLatteMauve,
.secCatppuccinLatteRed {
  --text-with-accent-color: #fff;
}

.secCatppuccinLatteMauve {
  --accent-color-rgb: 136 57 239;
  --accent-color-hover: #9f5cf1;
  --accent-color-active: #7129d2;
  --accent-color-light: #b076f8;
  --accent-color-visited: #6021a9;
}

.secCatppuccinLatteRed {
  --accent-color-rgb: 210 15 57;
  --accent-color-hover: #dd385c;
  --accent-color-active: #ad0c2e;
  --accent-color-light: #e64e71;
  --accent-color-visited: #810922;
}

/*************** DESTRUCTIVE THEME COLOR OVERRIDES ***************/

/* stylelint-disable no-descending-specificity */

/* destructive color in case of conflict with red color themes (sets new destructive color to purple)
  NOTE: RED COLORS MUST CONTAIN 'Red' IN CLASSNAME.
*/
body[class*='Red'] * {
  --destructive-color: #9c27b0;
  --destructive-text-color: #fff;
  --destructive-hover-color: #8e24aa;
  --destructive-active-color: #6a1b9a;
}

/* destructive color in case of conflict with red and purple color themes (sets new destructive color to yellow)
  NOTE: PURPLE COLORS MUST CONTAIN 'Purple' IN CLASSNAME.
*/
body[class*='Red'][class*='Purple'] * {
  --destructive-color: #ff9800;
  --destructive-text-color: #fff;
  --destructive-hover-color: #fb8c00;
  --destructive-active-color: #ef6c00;
}

/* stylelint-enable no-descending-specificity */


/*************** LEFT-TO-RIGHT AND RIGHT-TO-LEFT RULES ***************/

body[dir='ltr'] {
  --horizontal-directionality-coefficient: 1;
}

body[dir='rtl'] {
  --horizontal-directionality-coefficient: -1;
}

body[dir='rtl'] [data-prefix='fas']:not([data-icon='magnifying-glass'], [data-icon='circle-question'], [data-icon='check']) {
  transform: scale(-1, 1);
}

/* Arabic, Kurdish, Persian and Urdu have a reversed question mark, but not Hebrew and Yiddish */
html[lang='ar'] [data-prefix='fas'][data-icon='circle-question'],
html[lang='fa'] [data-prefix='fas'][data-icon='circle-question'],
html[lang='ku'] [data-prefix='fas'][data-icon='circle-question'],
html[lang='ur'] [data-prefix='fas'][data-icon='circle-question'] {
  transform: scale(-1, 1);
}


/*************** MAIN APP STYLING RULES ***************/

.app {
  color: var(--primary-text-color);
  background-color: var(--bg-color);
}


/* stylelint-disable no-descending-specificity */

/* stylelint-disable-next-line a11y/no-outline-none */
.hideOutlines *:focus {
  outline: none;
}

a:link {
  color: var(--link-color);
}

a:visited {
  color: var(--link-visited-color);
}

/* stylelint-enable no-descending-specificity */

@media (prefers-reduced-motion) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

::-webkit-scrollbar {
  inline-size: auto;
  block-size: auto;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-color);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  border: 0;
}

::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:focus {
  background: var(--scrollbar-color-hover);
}

/***** REMOVE MAIN SCROLLBAR WHEN PROMPT IS OPEN ******/

/* stylelint-disable-next-line selector-no-qualifying-type */
body:has(.prompt) {
  overflow: hidden;
}