/* Background colors */
.bg-primary { background-color: var(--color-primary) !important; }
.bg-primary-dark { background-color: var(--color-primary-dark) !important; }
.bg-primary-light { background-color: rgba(var(--color-primary-rgb), 0.15) !important; }

.bg-secondary { background-color: var(--color-secondary) !important; }
.bg-secondary-dark { background-color: var(--color-secondary-dark) !important; }
.bg-secondary-light { background-color: rgba(var(--color-secondary-rgb), 0.15) !important; }

.bg-color3 { background-color: var(--color-color3) !important; }
.bg-color3-dark { background-color: var(--color-color3-dark) !important; }
.bg-color3-light { background-color: rgba(var(--color-color3-rgb), 0.15) !important; }

.bg-color4 { background-color: var(--color-color4) !important; }
.bg-color4-dark { background-color: var(--color-color4-dark) !important; }
.bg-color4-light { background-color: rgba(var(--color-color4-rgb), 0.15) !important; }

.bg-color5 { background-color: var(--color-color5) !important; }
.bg-color5-dark { background-color: var(--color-color5-dark) !important; }
.bg-color5-light { background-color: rgba(var(--color-color5-rgb), 0.15) !important; }

.bg-color6 { background-color: var(--color-color6) !important; }
.bg-color6-dark { background-color: var(--color-color6-dark) !important; }
.bg-color6-light { background-color: rgba(var(--color-color6-rgb), 0.15) !important; }

.bg-light { background-color: var(--color-light) !important; }
.bg-light-dark { background-color: var(--color-light-dark) !important; }

.bg-white { background-color: var(--color-white) !important; }
.bg-white-light { background-color: rgba(var(--color-white-rgb), 0.15) !important; }

.bg-dark { background-color: var(--color-dark) !important; }
.bg-dark-dark { background-color: var(--color-dark-dark) !important; }
.bg-dark-light { background-color: rgba(var(--color-dark-rgb), 0.15) !important; }


html[data-theme="dark"] .bg-dark.cover-slide { background-color: var(--color-light) !important; }
html[data-theme="dark"] .bg-dark.columnbox { background-color: var(--color-light) !important; }
html[data-theme="dark"] .bg-dark.columnbox-section { background-color: var(--color-light) !important; }
html[data-theme="dark"] .bg-dark.in-cover { background-color: var(--color-light) !important; }
html[data-theme="dark"] .with-bg-image.bg-dark { background-color: var(--color-light) !important; }

/* Text Colors */
.c-primary { color: var(--color-primary) !important; }
.c-primary-dark { color: var(--color-primary-dark) !important; }
.c-primary-light { color: rgba(var(--color-primary-rgb), 0.15) !important; }

.c-secondary { color: var(--color-secondary) !important; }
.c-secondary-dark { color: var(--color-secondary-dark) !important; }
.c-secondary-light { color: rgba(var(--color-secondary-rgb), 0.15) !important; }

.c-color3 { color: var(--color-color3) !important; }
.c-color3-dark { color: var(--color-color3-dark) !important; }
.c-color3-light { color: rgba(var(--color-color3-rgb), 0.15) !important; }

.c-color4 { color: var(--color-color4) !important; }
.c-color4-dark { color: var(--color-color4-dark) !important; }
.c-color4-light { color: rgba(var(--color-color4-rgb), 0.15) !important; }

.c-color5 { color: var(--color-color5) !important; }
.c-color5-dark { color: var(--color-color5-dark) !important; }
.c-color5-light { color: rgba(var(--color-color5-rgb), 0.15) !important; }

.c-color6 { color: var(--color-color6) !important; }
.c-color6-dark { color: var(--color-color6-dark) !important; }
.c-color6-light { color: rgba(var(--color-color6-rgb), 0.15) !important; }

.c-light { color: var(--color-light) !important; }
.c-light-dark { color: var(--color-light-dark) !important; }

.c-white { color: var(--color-white) !important; }
.c-dark { color: var(--color-dark) !important; }
.c-dark-dark { color: var(--color-dark-dark) !important; }

/* Border Colors */
.border-primary { border-color: var(--color-primary) !important; }
.border-primary-dark { border-color: var(--color-primary-dark) !important; }
.border-primary-light { border-color: rgba(var(--color-primary-rgb), 0.08) !important; }

.border-secondary { border-color: var(--color-secondary) !important; }
.border-secondary-dark { border-color: var(--color-secondary-dark) !important; }
.border-secondary-light { border-color: rgba(var(--color-secondary-rgb), 0.08) !important; }

.border-color3 { border-color: var(--color-color3) !important; }
.border-color3-dark { border-color: var(--color-color3-dark) !important; }
.border-color3-light { border-color: rgba(var(--color-color3-rgb), 0.08) !important; }

.border-color4 { border-color: var(--color-color4) !important; }
.border-color4-dark { border-color: var(--color-color4-dark) !important; }
.border-color4-light { border-color: rgba(var(--color-color4-rgb), 0.08) !important; }

.border-color5 { border-color: var(--color-color5) !important; }
.border-color5-dark { border-color: var(--color-color5-dark) !important; }
.border-color5-light { border-color: rgba(var(--color-color5-rgb), 0.08) !important; }

.border-color6 { border-color: var(--color-color6) !important; }
.border-color6-dark { border-color: var(--color-color6-dark) !important; }
.border-color6-light { border-color: rgba(var(--color-color6-rgb), 0.08) !important; }

.border-light { border-color: var(--color-light) !important; }
.border-light-dark { border-color: var(--color-light-dark) !important; }

.border-white { border-color: var(--color-white) !important; }
.border-white-light { border-color: rgba(var(--color-white-rgb), 0.08) !important; }

.border-dark { border-color: var(--color-dark) !important; }
.border-dark-dark { border-color: var(--color-dark-dark) !important; }
.border-dark-light { border-color: rgba(var(--color-dark-rgb), 0.08) !important; }

/* Fill Colors */
.fill-primary { fill: var(--color-primary); }
.fill-primary-dark { fill: var(--color-primary-dark); }
.fill-primary-light { fill: rgba(var(--color-primary-rgb), 0.1); }

.fill-secondary { fill: var(--color-secondary); }
.fill-secondary-dark { fill: var(--color-secondary-dark); }
.fill-secondary-light { fill: rgba(var(--color-secondary-rgb), 0.1); }

.fill-color3 { fill: var(--color-color3); }
.fill-color3-dark { fill: var(--color-color3-dark); }
.fill-color3-light { fill: rgba(var(--color-color3-rgb), 0.1); }

.fill-color4 { fill: var(--color-color4); }
.fill-color4-dark { fill: var(--color-color4-dark); }
.fill-color4-light { fill: rgba(var(--color-color4-rgb), 0.1); }

.fill-color5 { fill: var(--color-color5); }
.fill-color5-dark { fill: var(--color-color5-dark); }
.fill-color5-light { fill: rgba(var(--color-color5-rgb), 0.1); }

.fill-color6 { fill: var(--color-color6); }
.fill-color6-dark { fill: var(--color-color6-dark); }
.fill-color6-light { fill: rgba(var(--color-color6-rgb), 0.1); }

.fill-light { fill: var(--color-light); }
.fill-light-dark { fill: var(--color-light-dark); }

.fill-white { fill: var(--color-white); }

.fill-dark { fill: var(--color-dark); }
.fill-dark-dark { fill: var(--color-dark-dark); }
.fill-dark-light { fill: rgba(var(--color-dark-rgb), 0.1); }


/* Base button */
.button {
	color: var(--color-dark);
  background-color: var(--color-primary);
}

.button:hover {
	color: var(--color-dark);
  background-color: var(--color-primary);
  box-shadow: 0 0 30px rgba(var(--color-primary-rgb), 0.3);
}

/* PRIMARY */
.button.primary {
	color: var(--color-dark);
  background-color: var(--color-primary);
}

.button.primary:hover {
	color: var(--color-dark-dark);
  background-color: var(--color-primary);
  box-shadow: 0 0 30px rgba(var(--color-primary-rgb), 0.3);
}

.button.primary-dark {
	color: var(--color-white);
  background-color: var(--color-primary-dark);
}

.button.primary-dark:hover {
	color: var(--color-white);
  background-color: var(--color-primary-dark);
  box-shadow: 0 0 30px rgba(var(--color-primary-rgb), 0.5);
}

.button.primary-light {
	color: var(--color-primary);
  background-color: rgba(var(--color-primary-rgb), 0.1);
}

.button.primary-light:hover {
  background-color: var(--color-primary);
  color: var(--color-dark) !important;
}

/* SECONDARY */
.button.secondary {
	color: var(--color-white);
  background-color: var(--color-secondary);
}

.button.secondary:hover {
	color: var(--color-white);
  background-color: var(--color-secondary);
  box-shadow: 0 0 30px rgba(var(--color-secondary-rgb), 0.5);
}

.button.secondary-dark {
	color: var(--color-white);
  background-color: var(--color-secondary-dark);
}

.button.secondary-dark:hover {
	color: var(--color-white);
  background-color: var(--color-secondary-dark);
  box-shadow: 0 0 30px rgba(var(--color-secondary-dark-rgb), 0.5);
}

.button.secondary-light {
	color: var(--color-secondary);
  background-color: rgba(var(--color-secondary-rgb), 0.1);
  color: var(--color-secondary) !important;
}

.button.secondary-light:hover {
  background-color: var(--color-secondary);
  color: var(--color-white) !important;
  box-shadow: 0 0 30px rgba(var(--color-secondary-rgb), 0.5);
}

/* COLOR3 */
.button.color3 {	
	color: var(--color-dark);
  background-color: var(--color-color3);
}

.button.color3:hover {
	color: var(--color-dark);
  background-color: var(--color-color3);
  box-shadow: 0 0 30px rgba(var(--color-color3-rgb), 0.5);
}

.button.color3-dark {
	color: var(--color-white);
  background-color: var(--color-color3-dark);
}

.button.color3-dark:hover {
	color: var(--color-white);
  background-color: var(--color-color3-dark);
  box-shadow: 0 0 30px rgba(var(--color-color3-dark-rgb), 0.5);
}

.button.color3-light {
	color: var(--color-color3);
  background-color: rgba(var(--color-color3-rgb), 0.1);
}

.button.color3-light:hover {
  background-color: var(--color-color3);
  color: var(--color-white) !important;
  box-shadow: 0 0 30px rgba(var(--color-color3-rgb), 0.5);
}
html[data-theme="dark"] .button.color3 {
	color: var(--color-white);
}

/* COLOR4 */
.button.color4 {
	color: var(--color-white);
  background-color: var(--color-color4);
}

.button.color4:hover {
	color: var(--color-white);
  background-color: var(--color-color4);
  box-shadow: 0 0 30px rgba(var(--color-color4-rgb), 0.5);
}

.button.color4-dark {
	color: var(--color-white);
  background-color: var(--color-color4-dark);
}

.button.color4-dark:hover {
	color: var(--color-white);
  background-color: var(--color-color4-dark);
  box-shadow: 0 0 30px rgba(var(--color-color4-dark-rgb), 0.5);
}

.button.color4-light {
  background-color: rgba(var(--color-color4-rgb), 0.1);
  color: var(--color-color4) !important;
}

.button.color4-light:hover {
  background-color: var(--color-color4);
  color: var(--color-white) !important;
  box-shadow: 0 0 30px rgba(var(--color-color4-rgb), 0.5);
}

/* COLOR5 */
.button.color5 {
	color: var(--color-white);
  background-color: var(--color-color5);
}

.button.color5:hover {
	color: var(--color-white);
  background-color: var(--color-color5);
  box-shadow: 0 0 30px rgba(var(--color-color5-rgb), 0.5);
}

.button.color5-dark {
	color: var(--color-white);
  background-color: var(--color-color5-dark);
}

.button.color5-dark:hover {
	color: var(--color-white);
  background-color: var(--color-color5-dark);
  box-shadow: 0 0 30px rgba(var(--color-color5-dark-rgb), 0.5);
}

.button.color5-light {
  background-color: rgba(var(--color-color5-rgb), 0.1);
  color: var(--color-color5) !important;
}

/* COLOR6 */
.button.color6 {
	color: var(--color-white);
  background-color: var(--color-color6);
}

.button.color6:hover {
	color: var(--color-white);
  background-color: var(--color-color6);
  box-shadow: 0 0 30px rgba(var(--color-color6-rgb), 0.5);
}

.button.color6-dark {
	color: var(--color-white);
  background-color: var(--color-color6-dark);
}

.button.color6-dark:hover {
	color: var(--color-white);
  background-color: var(--color-color6-dark);
  box-shadow: 0 0 30px rgba(var(--color-color6-dark-rgb), 0.5);
}

.button.color6-light {
  background-color: rgba(var(--color-color6-rgb), 0.1);
  color: var(--color-color6) !important;
}

/* LIGHT */
.button.light {
  background-color: var(--color-light);
  color: var(--color-primary-dark) ;
}

.button.light:hover {
  background-color: rgba(var(--color-light-rgb), 0.8);
  color: var(--color-primary-dark) !important;
}

/* WHITE */
.button.white {
  background-color: var(--color-white);
  color: var(--color-dark) !important;
}

.button.white:hover {
  background-color: rgba(var(--color-white-rgb), 0.8);
  color: var(--color-dark-dark) !important;
  box-shadow: 0 0 30px rgba(var(--color-white-rgb), 0.5);
}

/* DARK */
.button.dark {
	color: var(--color-light);
  background-color: var(--color-dark);
}

.button.dark:hover {
	color: var(--color-primary);
  background-color: var(--color-dark-dark);
}

.button.dark-dark {
	color: var(--color-light);
  background-color: var(--color-dark-dark);
}

.button.dark-dark:hover {
	color: var(--color-primary);
  background-color: var(--color-dark-dark);
}

.button.dark-light {
  background-color: rgba(var(--color-dark-rgb), 0.1);
  color: var(--color-dark) !important;
}

.button.dark-light:hover {
  background-color: rgba(var(--color-dark-rgb), 0.8);
  color: var(--color-dark) !important;
  box-shadow: 0 0 30px rgba(var(--color-dark-rgb), 0.5);
}

/* HOLLOW */
.button.hollow {
  border-width: 2px !important;
  border-color: rgba(var(--color-dark-rgb), 0.1) !important;
  color: var(--color-dark);
  box-shadow: none;
}

.button.hollow:hover {
  border-color: var(--color-dark) !important;
  color: var(--color-dark);
  box-shadow: none;
}

.button.hollow i {
  color: var(--color-dark);
}

.button.text {
  color: var(--color-dark);
}

/* ==========================================================================
   Gradient Helpers
   ========================================================================== */

.gradient {
	background: linear-gradient(
		var(--gradient-direction, to right),
		var(--gradient-start),
		var(--gradient-end)
	);
}

.shade {
	background: linear-gradient(
		var(--gradient-direction, to top),

		rgba(var(--gradient-rgb), 1) 0%,
		rgba(var(--gradient-rgb), 1) 15%,
		rgba(var(--gradient-rgb), 0.85) 30%,
		rgba(var(--gradient-rgb), 0.65) 45%,
		rgba(var(--gradient-rgb), 0.45) 60%,
		rgba(var(--gradient-rgb), 0.25) 75%,
		rgba(var(--gradient-rgb), 0.1) 90%,
		rgba(var(--gradient-rgb), 0) 100%
	);
}

/* ==========================================================================
   Directions
   ========================================================================== */

.gradient-to-right,
.shade-to-right {
	--gradient-direction: to right;
}

.gradient-to-left,
.shade-to-left {
	--gradient-direction: to left;
}

.gradient-to-top,
.shade-to-top {
	--gradient-direction: to top;
}

.gradient-to-bottom,
.shade-to-bottom {
	--gradient-direction: to bottom;
}

.gradient-to-top-right,
.shade-to-top-right {
	--gradient-direction: to top right;
}

.gradient-to-top-left,
.shade-to-top-left {
	--gradient-direction: to top left;
}

.gradient-to-bottom-right,
.shade-to-bottom-right {
	--gradient-direction: to bottom right;
}

.gradient-to-bottom-left,
.shade-to-bottom-left {
	--gradient-direction: to bottom left;
}

/* ==========================================================================
   Gradient Colors (Color -> Color Dark)
   ========================================================================== */

.gradient-primary {
	--gradient-start: var(--color-primary);
	--gradient-end: var(--color-primary-dark);
}

.gradient-secondary {
	--gradient-start: var(--color-secondary);
	--gradient-end: var(--color-secondary-dark);
}

.gradient-color3 {
	--gradient-start: var(--color-color3);
	--gradient-end: var(--color-color3-dark);
}

.gradient-color4 {
	--gradient-start: var(--color-color4);
	--gradient-end: var(--color-color4-dark);
}

.gradient-color5 {
	--gradient-start: var(--color-color5);
	--gradient-end: var(--color-color5-dark);
}

.gradient-color6 {
	--gradient-start: var(--color-color6);
	--gradient-end: var(--color-color6-dark);
}

.gradient-light {
	--gradient-start: var(--color-light);
	--gradient-end: var(--color-light-dark);
}

.gradient-dark {
	--gradient-start: var(--color-dark);
	--gradient-end: var(--color-dark-dark);
}

/* ==========================================================================
   Shade Colors (Color -> Transparent)
   ========================================================================== */

.shade-primary {
	--gradient-rgb: var(--color-primary-rgb);
}

.shade-secondary {
	--gradient-rgb: var(--color-secondary-rgb);
}

.shade-color3 {
	--gradient-rgb: var(--color-color3-rgb);
}

.shade-color4 {
	--gradient-rgb: var(--color-color4-rgb);
}

.shade-color5 {
	--gradient-rgb: var(--color-color5-rgb);
}

.shade-color6 {
	--gradient-rgb: var(--color-color6-rgb);
}

.shade-light {
	--gradient-rgb: var(--color-light-rgb);
}

.shade-white {
	--gradient-rgb: var(--color-white-rgb);
}

.shade-dark {
	--gradient-rgb: var(--color-dark-rgb);
}

/* ==========================================================================
   Shade Dark Variants (Color Dark -> Transparent)
   ========================================================================== */

.shade-primary-dark {
	--gradient-rgb: var(--color-primary-dark-rgb);
}

.shade-secondary-dark {
	--gradient-rgb: var(--color-secondary-dark-rgb);
}

.shade-color3-dark {
	--gradient-rgb: var(--color-color3-dark-rgb);
}

.shade-color4-dark {
	--gradient-rgb: var(--color-color4-dark-rgb);
}

.shade-color5-dark {
	--gradient-rgb: var(--color-color5-dark-rgb);
}

.shade-color6-dark {
	--gradient-rgb: var(--color-color6-dark-rgb);
}

.shade-light-dark {
	--gradient-rgb: var(--color-light-dark-rgb);
}

.shade-dark-dark {
	--gradient-rgb: var(--color-dark-dark-rgb);
}


/* ==========================================================================
   Blur Overlay
   ========================================================================== */

.blur-overlay {
	position: relative;
	overflow: hidden;
}

.blur-overlay::before {
	content: "";
	position: absolute;
	inset: 0;

	backdrop-filter: blur(var(--blur-size, 16px));
	-webkit-backdrop-filter: blur(var(--blur-size, 16px));

	pointer-events: none;
	z-index: 1;
}

/* Zorg dat content boven de blur blijft */
.blur-overlay > * {
	position: relative;
	z-index: 2;
}

.blur-sm {
	--blur-size: 4px;
}

.blur {
	--blur-size: 8px;
}

.blur-md {
	--blur-size: 12px;
}

.blur-lg {
	--blur-size: 16px;
}

.blur-xl {
	--blur-size: 24px;
}

.blur-2xl {
	--blur-size: 32px;
}


.blur-to-top::before {
	mask-image: linear-gradient(
		to top,
		black 0%,
		transparent 100%
	);

	-webkit-mask-image: linear-gradient(
		to top,
		black 0%,
		transparent 100%
	);
}

.blur-to-bottom::before {
	mask-image: linear-gradient(
		to bottom,
		black 0%,
		transparent 100%
	);

	-webkit-mask-image: linear-gradient(
		to bottom,
		black 0%,
		transparent 100%
	);
}

.blur-to-left::before {
	mask-image: linear-gradient(
		to left,
		black 0%,
		transparent 100%
	);

	-webkit-mask-image: linear-gradient(
		to left,
		black 0%,
		transparent 100%
	);
}

.blur-to-right::before {
	mask-image: linear-gradient(
		to right,
		black 0%,
		transparent 100%
	);

	-webkit-mask-image: linear-gradient(
		to right,
		black 0%,
		transparent 100%
	);
}