$background-color: null;
$text-color: null;
$theme: null;
$value-background: null;
$box-shadow-color: null;
$background-img-brightness: null;
$img-filter: null;
$bbb-img-filter: null;
$color-button: null;

$contact-us-blue-light: #8498E7;

@function colorContrast($base-color, $light-color, $dark-color) {
  $result: $light-color;
  @if (lightness($base-color) > 45) {
    $result: $dark-color;
  }
  @return $result;
}

@mixin btnStyles($color-btn, $color-btn-text) {
	background-color: $color-btn;
	color: $color-btn-text;

	.btn__text {
		color: $color-btn-text;
	}

	&:hover,
	&:active,
	&:focus {
		background-color: darken($color-btn, 10%);
		color: $color-btn-text;

		.btn__text {
			color: $color-btn-text;
		}
	}
}

@mixin theme-dark(
	$accent-color: null,
	$back-btn-background-color: null,
	$background: $color-charcoal8,
	$base-color: null,
	$bbb-img-filter: grayscale(1) invert(.915) brightness(1.5),
	$color-btn: null,
	$color-btn-text: null,
	$checkbox-label-color: null,
	$footer-background: $color-charcoal9,
	$foreground: $color-grey-300,
	$form-focus-border-color: $color-grey-400,
	$hero-content-box-shadow-mobile: null,
	$interactive-text-color: $color-grey-500,
	$interactive-text-color-hover: darken($interactive-text-color, 10%),
	$logo-filter: invert(1) hue-rotate(180deg),
	$partners-logo-filter: grayscale(1) invert(.9),
	$radio-btn-background-color: $background,
	$radio-btn-border-color: null,
	$radio-btn-checked-background-color: null,
	$radio-btn-checked-border-color: null,
	$radio-btn-checked-icon-background-color: null,
	$radio-btn-checked-icon-color: $color-grey-300,
	$radio-btn-checked-text-color: $color-grey-300,
	$radio-btn-focus-box-shadow: null,
	$radio-btn-icon-background: transparent,
	$radio-btn-icon-color: $background,
	$radio-btn-text-color: $color-grey-300,
	$tcpa-color: lighten($color-grey-500, 2%),
	$value-props-background: null
	) {
	// Theme global variables if required to use after including the mixin
	$background-color: $background !global;
	$background-img-brightness: brightness(60%) !global;
	$base-color: $base-color !global;
	$bbb-img-filter: $bbb-img-filter;
	$box-shadow-color: rgba($color-black, 60%) !global;
	$button-saturation: saturate(70%) !global;
	$color-button: $color-btn !global;
	$img-filter: invert(1) hue-rotate(180deg) !global;
	$text-color: $foreground !global;
	$value-props-background: $value-props-background;

	@if ($color-btn != null and $color-btn-text == null) {
		$color-btn-text: colorContrast($color-btn, $foreground, $background);
	}

	@if ($base-color == null and $accent-color != null) {
		$theme: $accent-color !global;
	} @else {
		$theme: $base-color !global;
	}

	@if ($checkbox-label-color == null) {
		$checkbox-label-color: $text-color;
	}

	// Most common selectors list
	$content-selectors: '.hero__title,.hero__subtitle,input,.toggle-wrapper,.step__header-title,.step__title,[class^="information__"],[class^="featured-block__"],[class^="partners__"],.form-group__label,.modal-header--close,.modal-phone,.modal-body p,legend,[class^="loader__"],table tr,.tile__text,.modal-dialog';
	$background-selectors: '.form,.header,.guarantee,.information,.modal-content,.modal-dialog,.matched-steps,.loader,.information__header,.hero__background,.hero__content,.form-input,.form-input:focus,.expand-collapse__icon,.featured-block,table tr,.form-control';

	@media (prefers-color-scheme: dark){
		body[data-color-scheme='system'] {
			color-scheme: dark;
			color: $text-color;
			background-color: $background-color;

			// Change background color of listed selectors
			#{$background-selectors} {
				background-color: $background-color;
			}

			// Change text color of listed selectors
			#{$content-selectors} {
				color: $text-color;
			}

			.checkbox {
				color: $checkbox-label-color;
			}

			.partners {
				background-color: darken($background, 2%);

				&__logo img {
					filter: $partners-logo-filter;
				}
			}

			.featured-block__image img,
			.featured-block__media img {
				filter: $background-img-brightness;
			}

			.header__logo img,
			.header__logo svg {
				filter: $logo-filter;
			}

			.form-input-group__icon {
				background-color: transparent;
			}

			.icon-close,
			.progress-bar__title,
			.header__back-button,
			.form-input-group__icon,
			.secure-text,
			.step__secure-text,
			.modal-subtitle {
				color: $color-grey-500;
			}

			.tcpa {
				color: $tcpa-color;

				a,
				.checkbox {
					color: $tcpa-color;
				}

				input[type=checkbox]::before  {
					border-color: $tcpa-color;
					color: $tcpa-color;
				}

				a,
				input[type=checkbox] {
					&:focus {
						outline-color: $color-white;
					}
				}
			}

			.icon-close:hover {
				color: $color-grey-400;
			}

			.step__header,
			.step__supertitle {
				background-color: $base-color;
			}

			@if $base-color != null {
				.step__header-title,
				.step__supertitle {
					color: colorContrast($base-color, $foreground, $background);
				}
			}

			.value-props {
				background: $value-props-background;

				@if type_of($value-props-background) == 'color' {
					color: colorContrast($value-props-background, $foreground, $background);

					@if (lightness($value-props-background) > 45) {
						&__icon {
							filter: invert(1);
						}
					}
				}
			}

			.progress-bar {
				&__background {
					background-color: lighten($color-grey-700, 10%);
				}

				&__fill {
					background-color: $base-color;
				}
			}

			.information,
			.expand-collapse__icon {
				border-color: $color-grey-700;
			}

			.expand-collapse__icon {
				color: $color-grey-500;
			}

			.expand-collapse__toggle {
				color: $color-grey-500;

				&:hover {
					&,
					.expand-collapse__icon {
						color: $color-grey-600;
					}
				}
			}

			.form {
				border: 0;

				&--inverted {
					box-shadow: 0 2px 4px $box-shadow-color;
				}
			}

			.form-group {
				&__label-input {
					z-index: 1;
				}

				&:not(.has-error) {
					.form-group__label-input {
						color: $color-grey-500;
						z-index: 1;
					}

					.form-input,
					.form-input-group--icon,
					.form-radio label {
						border-color: $color-grey-500;
					}

					.form-input-group--icon,
					.form-input {
						&:-webkit-autofill,
						&:not(:placeholder-shown),
						&:focus {
							border-color: $form-focus-border-color;

							+ label {
								color: $form-focus-border-color;
							}

							~ .form-input-group__icon {
								color: $form-focus-border-color;
							}
						}
					}
				}

				&__tooltip-message {
					color: $color-ivory6;
					border-color: $color-grey-700;
					box-shadow: 0 4px 8px rgba($color-ivory6, 10%);

					&::after {
						border-bottom-color: $background;
					}

					&::before {
						border-bottom-color: $color-grey-700;
					}

				}
			}

			.has-error {
				.form-input,
				.form-input:-webkit-autofill {
					border-color: $color-salmon-500;
					color: $color-salmon-500;
				}

				.form-input-group__icon,
				.form-group__label-input {
					color: $color-salmon-500;
				}

				.form-input-group {
					&--includes-label {
						.form-input:focus,
						.form-input:not(:placeholder-shown) {
							~ .form-input-group__icon {
								color: $color-salmon-500;
							}

							+ label {
								color: $color-salmon-500;
							}
						}
					}
				}
			}

			.form-group__error-message {
				color: $color-salmon-500;
			}

			.hero__background-image {
				filter: $background-img-brightness;
			}

			@if $color-btn != null {
				.btn--primary,
				.btn-primary,
				.btn-next,
				.featured-block__btn {
					@include btnStyles($color-btn, $color-btn-text);

					.btn__spinner::after {
						border: 4px solid $color-grey-200;
						border-right-color: $background;
						border-top-color: $background;
					}
				}
			}

			.matched {
				background-color: $color-charcoal8;

				&__title {
					color: $text-color;
				}

				&__subtitle,
				.item__text {
					color: $color-ivory3;
				}

				&-steps {
					background-color: $background;
				}
			}

			.modal {
				&-backdrop {
					opacity: .8;
				}

				[class*='icon'] {
					filter: invert(1);
				}

				&-body {
					a {
						color: lighten(#3678ba, 15%);
						&:hover {
							color: lighten(#3678ba, 25%);
							background-color: transparent;
						}
					}

					caption {
						background: $color-black !important;
					}

					table, tr, th, td {
						border-color: $color-ivory6;
					}

					th {
						color: $text-color;
						background-color: darken($background, 8%);
					}

					table.data-subject-requests tr:hover{
						background-color: darken($color-yellow7, 5%);
					}
				}
			}

			.reviews-card {
				background-color: $background;
				border-color: $color-grey-700;
				box-shadow: 0px 8px 16px 0px rgba($color-grey-500, 10%);
				color: $text-color;

				&__avatar img {
					filter: unset;
				}
			}

			.matched,
			.unmatched {
				border-color: $color-grey-700;
			}

			.footer {
				background-color: $footer-background;

				&__links,
				&__head-link,
				&__copyright,
				&__captcha-disclosure {
					color: $text-color;
				}

				&__links li a,
				&__head-link a {
					&,
					&:visited {
						color: $text-color !important;
					}

					&:active,
					&:hover,
					&:focus {
						color: $color-grey-500 !important;
					}
				}

				&__captcha-disclosure {
					a {
						color: $color-blue3 !important;

						&:visited {
							color: $color-blue3 !important;
						}

						&:active,
						&:hover,
						&:focus {
							color: $color-blue5 !important;
						}
					}
				}
			}

			/* Contact Us Modal Form Overwrite */
			.contact-us {
				.step {
					&__header-number {
						background-color: darken($background, 8%);
					}

					&__header-text {
						background-color: lighten($background, 8%);
					}
				}

				.form-group {
					label {
						color: $text-color;
					}
				}

				legend {
					border-bottom: 0;
					color: $text-color;
				}

				.field {
					border-color: $color-grey-500;

					input:checked {
						+ label {
							&::before {
								background-color: $contact-us-blue-light;
								color: $background;
							}
						}
					}

					&:hover {
						background-color: rgba($color-grey-200, .2);
						border-color: $text-color;
					}

					&:focus-within {
						outline-color: $color-grey-200;
					}
				}

				.form-control {
					border-color: $color-grey-500;

					&:hover,
					&:focus {
						border-color: $text-color;
					}

					&:focus {
						background-color: rgba($color-grey-200, .2);
					}
				}

				.btn-back {
					border-color: $text-color;
					color: $text-color;

					&:hover,
					&:focus {
						background-color: transparent;
						border-color: $contact-us-blue-light;
						color: $contact-us-blue-light;
					}
				}

				.btn-submit {
					border-color: $contact-us-blue-light;
					color: $contact-us-blue-light;

					&:hover,
					&:focus {
						background-color: $contact-us-blue-light;
						color: $background;
					}
				}
			}

			.loader {
				image {
					filter: invert(1) hue-rotate(180deg) brightness(2);
				}

				#Circle {
					filter: invert(1);
				}

				#Left-Arrow,
				#Right-Arrow {
					path {
						fill:$color-lavender-500;

						&:not(:first-of-type) {
							stroke: $color-lavender-500;
						}
					}
				}
			}

			/* Need to overwrite inline styles of double submission block */
			.duplicate-submission {
				background-color: $background-color !important;
				color: $text-color !important;

				h3,
				p {
					color: $text-color !important;
				}
			}

			.form__bbb-logo,
			.footer__bbb,
			.bbb-logo,
			.header__bbb-logo {
				filter: $bbb-img-filter;
			}

			.header__back-button {
				border-right-color: $color-grey-500;
			}

			.back-btn,
			.btn--back,
			.zip-control__location,
			.zip-control__icon {
				color: $interactive-text-color;
			}

			.back-btn,
			.btn--back,
			.zip-control__button {
				&:hover,
				&:focus {
					background-color: rgba($color-grey-500, 10%);
					outline-color: $color-grey-500;

					.zip-control__location,
					.zip-control__icon {
						color: $interactive-text-color-hover;
					}
				}
			}

			@if $back-btn-background-color != null {
				.btn-back {
					background-color: $back-btn-background-color;

					&:hover {
						background-color: darken($back-btn-background-color, 5%);
					}
				}
			}

			&.form-in-progress {
				.hero {
					border-color: $color-grey-700;
				}
			}

			.form-input-group {
				&--includes-label {
					.form-input:not(:placeholder-shown) {
						background-color: $background-color;
					}

					.form-input:not(:placeholder-shown),
					.form-input:focus {
						+ label {
							color: $color-grey-200;
						}
					}
				}
			}

			.radio__button {
				label {
					input[type='radio'] {
						&:hover {
							&:not(:checked) + .radio__button-text {
								color: $radio-btn-checked-text-color;

								&::before {
									background-color: $radio-btn-checked-background-color;
									border-color: $radio-btn-checked-border-color;
								}

								+ span {
									background-color: $radio-btn-checked-icon-background-color;

									&::before {
										color: $radio-btn-checked-icon-color;
									}
								}
							}
						}

						&:focus + span::before {
							box-shadow: $radio-btn-focus-box-shadow;
						}

						&:not(:hover,:checked) {
							+ .radio__button-text {
								color: $radio-btn-text-color;

								&::before {
									background-color: $background;
									border-color: $radio-btn-border-color;
								}

								// Icon
								+ span {
									background-color: $radio-btn-icon-background;

									&::before {
										color: $radio-btn-icon-color;
										transition: color .15s ease;
									}
								}
							}
						}

						&:checked + .radio__button-text {
							color: $radio-btn-checked-text-color;

							+ span {
								background-color: $radio-btn-checked-icon-background-color;

								&::before {
									color: $radio-btn-checked-icon-color;
								}
							}

							&::before {
								border-color: $radio-btn-checked-border-color;
								background-color: $radio-btn-checked-background-color;
							}
						}
					}
				}

				.tile {
					&__icon {
						border-radius: 10px;
						padding: 3px;
					}

					&__text {
						&::before {
							border-radius: 10px;
						}
					}
				}
			}

			// Ketch Preference dashboard styles
			#lanyard_root * {
				background-color: $color-black !important;
				color: $color-white !important;
				outline-color: $color-white !important;

				button {
					background-color: $color-charcoal7 !important;

					* {
						background-color: $color-charcoal7 !important;
					}

					input[type="checkbox"] ~ span {
						background:  transparent !important;

						svg {
							background:  transparent !important;
						}
					}

					input[type="checkbox"]:not(:checked) + div {
						background-color: $color-charcoal8 !important;
					}
				}

				button[aria-label='Reject All'],
				button[aria-label='Accept All'],
				button[aria-label='Save'] {
					background-color: $color-white !important;
					color: $color-black !important;
				}

				button[aria-label='Exit'] {
					div {
						svg {
							path {
								filter: invert(1) !important;
							}
						}
					}

				}

				a[aria-label='Learn more about Ketch for data privacy'] {
					svg {
						filter: brightness(5);
					}
				}
			}

			@include breakpoint-phone {
				.hero--full {
					background-color: $background;
				}

				.hero__content {
					box-shadow: $hero-content-box-shadow-mobile;
				}

				.form--inverted {
					box-shadow: none;
				}

				&.form-in-progress {
					.hero {
						background-color: $background-color;
					}
				}
			}
			// To load additional site-level style blocks
			@content;
		}
	}
}