@import './variables';

//
// Theme Utilities
//

@mixin if-theme-light {
	// apply as default (no .Theme__Light selector required)
	@content;

	// loop over each selector for the css rule to correctly apply each style
	@each $selector in selector-parse(&) {
		// support explicitly setting section theme color for selector pattern: html .Theme__Dark div .Theme__Light div .my-custom-selector
		@at-root :global(.Theme__Dark) :global(.Theme__Light) #{$selector} {
			@content;
		}

		// support explicitly setting section theme color for selector pattern: html .Theme__Dark div .my-custom-selector div .Theme__Light div (e.g .Theme__Dark body .Theme__Light)
		@at-root :global(.Theme__Dark) #{$selector} :global(.Theme__Light) {
			@content;
		}

		// Handle basic theme inversion
		@at-root :global(.Theme__Dark) :global(.Theme__Inverted) #{$selector} {
			@content;
		}
	}
}

@mixin if-theme-dark {
	// loop over each selector for the css rule to correctly apply each style
	@each $selector in selector-parse(&) {
		@at-root :global(.Theme__Dark) #{$selector} {
			@content;
		}

		// support explicitly setting section theme color for selector pattern: html .Theme__Light div .Theme__Dark div .my-custom-selector
		@at-root :global(.Theme__Light) :global(.Theme__Dark) #{$selector} {
			@content;
		}

		// support explicitly setting section theme color for selector pattern: html .Theme__Light div .my-custom-selector div .Theme__Dark div (e.g .Theme__Light body .Theme__Dark)
		@at-root :global(.Theme__Light) #{$selector} :global(.Theme__Dark) {
			@content;
		}

		// Handle basic theme inversion
		@at-root :global(.Theme__Light) :global(.Theme__Inverted) #{$selector} {
			@content;
		}
	}
}

// Theme General CSS Props

@mixin __theme-background($lightmodeBackground, $darkmodeBackground) {
	@include if-theme-light() {
		background: $lightmodeBackground;
	}
	@include if-theme-dark() {
		background: $darkmodeBackground;
	}
}

@mixin theme-background-gray1-else-none-disabled {
	@include __theme-background($gray1, none);
}

@mixin theme-background-gray2-else-gray2row {
	@include __theme-background($gray2, #292A2A); // 35% of $gray-dark50
}

@mixin theme-background-gray2-else-graydark {
	@include __theme-background($gray2, $gray-dark);
}

@mixin theme-background-gray2-else-graydark50 {
	@include __theme-background($gray2, $gray-dark50);
}

@mixin theme-background-gray5-else-graydarkalt {
	@include __theme-background($gray5, $gray-dark-alt);
}

@mixin theme-background-gray5-else-graydark {
	@include __theme-background($gray5, $gray-dark);
}

@mixin theme-background-gray5-else-gray-dark50 {
	@include __theme-background($gray5, $gray-dark50);
}

@mixin theme-background-gray15-else-graydark50 {
	@include __theme-background($gray15, $gray-dark50);
}

@mixin theme-background-gray15-else-graydarkalt {
	@include __theme-background($gray15, $gray-dark-alt);
}

@mixin theme-background-none-else-graydark50 {
	@include __theme-background(none, $gray-dark50);
}

@mixin theme-background-gray15-else-gray {
	@include __theme-background($gray15, $gray);
}

@mixin theme-background-gray25-else-gray {
	@include __theme-background($gray25, $gray);
}

@mixin theme-background-gray25-else-graydark50 {
	@include __theme-background($gray25, $gray-dark50);
}

@mixin theme-background-graydark-else-white {
	@include __theme-background($gray-dark, $white);
}

@mixin theme-background-green-else-graydark {
	@include __theme-background($green, $gray-dark);
}

@mixin theme-background-greendark-else-green {
	@include __theme-background($green-dark, $green);
}

@mixin theme-background-greendark50-else-green {
	@include __theme-background($green-dark50, $green);
}

@mixin theme-background-greendark50-else-graydarker {
	@include __theme-background($green-dark50, $gray-darker);
}

@mixin theme-background-white-else-graydark {
	@include __theme-background($white, $gray-dark);
}

@mixin theme-background-white-else-gray25 {
	@include __theme-background($white, $gray25);
}

@mixin theme-background-white-else-graydarkalt {
	@include __theme-background($white, $gray-dark-alt);
}

@mixin theme-background-white-else-graydark50 {
	@include __theme-background($white, $gray-dark50);
}

@mixin theme-background-white-else-gray3row {
	@include __theme-background($white, #373737);
}

@mixin theme-background-white85-else-graydark {
	@include __theme-background(rgba($white, .85), $gray-dark);
}

@mixin __theme-border($property: "", $lightmodeLighten: 0%, $darkmodeLighten: 0%, $border-light: $theme-border-light, $border-dark: $theme-border-dark, $border-width: 2px) {
	@if $property == "" or $property == "box-shadow" {
		@include if-theme-light() {
			box-shadow: 0 0 0 $border-width lighten($border-light, $lightmodeLighten);
		}
		@include if-theme-dark() {
			box-shadow: 0 0 0 $border-width lighten($border-dark, $darkmodeLighten);
		}
	}
	@else {
		@include if-theme-light() {
			#{$property}: $border-width solid lighten($border-light, $lightmodeLighten);
		}
		@include if-theme-dark() {
			#{$property}: $border-width solid lighten($border-dark, $darkmodeLighten);
		}
	}
}

@mixin theme-border($lightmodeLighten: 0%, $darkmodeLighten: 0%) {
	@include __theme-border("", $lightmodeLighten, $darkmodeLighten);
}

@mixin theme-border-bottom($lightmodeLighten: 0%, $darkmodeLighten: 0%) {
	@include __theme-border("border-bottom", $lightmodeLighten, $darkmodeLighten);
}

@mixin theme-border-left($lightmodeLighten: 0%, $darkmodeLighten: 0%) {
	@include __theme-border("border-left", $lightmodeLighten, $darkmodeLighten);
}

@mixin theme-border-right($lightmodeLighten: 0%, $darkmodeLighten: 0%) {
	@include __theme-border("border-right", $lightmodeLighten, $darkmodeLighten);
}

@mixin theme-border-top($lightmodeLighten: 0%, $darkmodeLighten: 0%) {
	@include __theme-border("border-top", $lightmodeLighten, $darkmodeLighten);
}

@mixin __theme-border-color($property: "border-color") {
	@include if-theme-light() {
		#{$property}: $theme-border-light;
	}
	@include if-theme-dark() {
		#{$property}: $theme-border-dark;
	}
}

@mixin theme-border-color {
	@include __theme-border-color;
}

@mixin __theme-color($colorLight, $colorDark) {
	@include if-theme-light() {
		color: $colorLight;
	}
	@include if-theme-dark() {
		color: $colorDark;
	}
}

@mixin theme-color-black-else-white {
	@include __theme-color($black, $white);
}

@mixin theme-color-gray-else-gray15 {
	@include __theme-color($gray, $gray15);
}

@mixin theme-color-gray-else-gray25 {
	@include __theme-color($gray, $gray25);
}

@mixin theme-color-gray-else-gray75 {
	@include __theme-color($gray, $gray75);
}

@mixin theme-color-gray-else-white {
	@include __theme-color($gray, $white);
}

@mixin theme-color-gray15-else-gray-dark50-disabled {
	@include __theme-color($gray15, $gray-dark50);
}

@mixin theme-color-gray25-else-gray {
	@include __theme-color($gray25, $gray);
}

@mixin theme-color-gray25-else-gray-dark50 {
	@include __theme-color($gray25, $gray-dark50);
}

@mixin theme-color-gray25-else-gray25 {
	@include __theme-color($gray25, $gray25);
}

@mixin theme-color-gray25-else-white {
	@include __theme-color($gray25, $white);
}

@mixin theme-color-gray25-else-gray75 {
	@include __theme-color($gray25, $gray75);
}

@mixin theme-color-gray75-else-gray25 {
	@include __theme-color($gray75, $gray25);
}

@mixin theme-color-gray75-else-white {
	@include __theme-color($gray75, $white);
}

@mixin theme-color-gray85-else-gray75 {
	@include __theme-color($gray85, $gray75);
}

@mixin theme-color-graydark-else-white {
	@include __theme-color($gray-dark, $white);
}

@mixin theme-color-graydark-else-gray25 {
	@include __theme-color($gray-dark, $gray25);
}

@mixin theme-color-graydark50-else-gray25 {
	@include __theme-color($gray-dark50, $gray25);
}

@mixin theme-color-graydark50-else-white {
	@include __theme-color($gray-dark50, $white);
}

@mixin theme-color-white-else-gray25 {
	@include __theme-color($white, $gray25);
}

@mixin theme-color-red-dark50-else-red {
	@include __theme-color($red-dark50, $red);
}

@mixin theme-color-red-dark50-else-red75 {
	@include __theme-color($red-dark50, $red75);
}

@mixin __theme-fill($fillLight, $fillDark) {
	@include if-theme-light() {
		fill: $fillLight;
	}
	@include if-theme-dark() {
		fill: $fillDark;
	}
}

@mixin theme-fill-gray-else-white {
	@include __theme-fill($gray, $white);
}

@mixin theme-fill-gray15-else-gray {
	@include __theme-fill($gray15, $gray);
}

@mixin theme-fill-gray25-else-gray75 {
	@include __theme-fill($gray25, $gray75);
}

@mixin theme-fill-gray75-else-gray25 {
	@include __theme-fill($gray75, $gray25)
}

@mixin theme-fill-gray75-else-gray {
	@include __theme-fill($gray75, $gray)
}

@mixin theme-fill-graydark-else-gray25 {
	@include __theme-fill($gray-dark, $gray25);
}

@mixin theme-fill-graydark-else-white {
	@include __theme-fill($gray-dark, $white);
}

@mixin theme-fill-green-else-white {
	@include __theme-fill($green, $white);
}

@mixin theme-fill-green-else-gray25 {
	@include __theme-fill($green, $gray25);
}

@mixin theme-fill-greendark-else-green {
	@include __theme-fill($green-dark, $green);
}

@mixin theme-fill-greendark-else-gray75 {
	@include __theme-fill($green-dark, $gray75);
}

@mixin theme-fill-greendark-else-graydark {
	@include __theme-fill($green-dark, $gray-dark);
}

@mixin theme-fill-white-else-graydark {
	@include __theme-fill($white, $gray-dark);
}

@mixin theme-fill-white-else-green75 {
	@include __theme-fill($white, $green75);
}

@mixin theme-fill-red-dark50-else-red {
	@include __theme-fill($red-dark50, $red);
}

@mixin theme-fill-red-dark50-else-red75 {
	@include __theme-fill($red-dark50, $red75);
}

@mixin theme-fill-greendark50-else-white-hover {
	@include __theme-fill($green-dark50, $white);
}

@mixin __theme-overlay-boxshadow($boxshadowLight, $boxshadowDark) {
	@include if-theme-light() {
		box-shadow: 0px -5px 16px $boxshadowLight;
	}
	@include if-theme-dark() {
		box-shadow: 0px -5px 16px $boxshadowDark;
	}
}

@mixin theme-overlay-boxshadow {
	@include __theme-overlay-boxshadow($theme-overlay-box-shadow-light, $theme-overlay-box-shadow-dark);
}

// Theme Components

@mixin theme-button-pill-disabled {
	@include if-theme-light() {
		background: $gray15 !important;
		color: $gray75 !important;
	}
	@include if-theme-dark() {
		background: $gray !important;
		color: $gray-dark50 !important;
	}
}

@mixin theme-input-background-color {
	@include if-theme-light() {
		background-color: $white;
	}
	@include if-theme-dark() {
		background-color: $gray-dark;
	}
}

@mixin theme-tab-border-active {
	@include if-theme-light() {
		border-bottom: 4px solid $green;
	}
	@include if-theme-dark() {
		border-bottom: 4px solid $green;
	}
}

@mixin theme-input-border-box-shadow {
	border: none;
	border-radius: 4px;
	@include __theme-border("", 0%, 0%, $theme-border-light, $theme-input-border-box-shadow-dark, 1px);
}

@mixin theme-input-border {
	border: none;
	border-radius: 4px;
	@include __theme-border("border", 0%, 0%, $theme-border-light, $theme-input-border-box-shadow-dark, 1px);
}

// Theme Patterns

@mixin theme-stripes-white-else-graydark {
	@include if-theme-light() {
		@include stripes($white, $gray1);
	}
	@include if-theme-dark() {
		@include stripes(#2a2b2b, $gray-dark);
	}
}

@mixin theme-stripes-gray15-else-graydark {
	@include if-theme-light() {
		@include stripes($gray15, $gray5);
	}
	@include if-theme-dark() {
		@include stripes($gray-dark, $gray-dark50);
	}
}