Theme: Default

.Theme {
	&--blue {
		&.Theme__bg, .Theme__bg {
			@apply bg-blue;
		}

		.Theme__copy {
			@apply text-white;
		}
	}

	&--green, &--orange, &--turquoise, &--violet {
		&.Theme__slant, .Theme__slant {
			@apply relative;

			&:before {
        @apply content-empty
          z-0
          opacity-30
          absolute
          bg-black
          transition-[right]
          duration-500
          ease-in-out;
      }

			& > * {
				@apply relative;
			}
		}

		&.Theme__slant {
			@apply overflow-hidden;
		}
		
		&.Theme__bg, .Theme__bg {
			&, *:not(input, select) {
				@apply text-white;

				.copy {
					span {
						@apply text-white #{!important};
					}
				}
			}

			.Button--ghost {
				@apply border-white
					hover:text-blue
					hover:bg-white #{!important};
			}
		}
		// gray theme takes precedence over other themes
		&.Theme--gray {
			&.Theme__bg {
				@apply bg-gray-200
					bg-none;

				.Block__title {
					@apply text-blue;
				}
			}
		}
	}

	&--green {
		&.Theme__bg, .Theme__bg:not(.Theme) {
			@apply
				bg-gradient-to-r 
				from-gradient-green-start 
				to-gradient-green-end;
		}

	}

	&--orange {
		&.Theme__bg, .Theme__bg:not(.Theme) {
			@apply
				bg-gradient-to-r 
				from-gradient-orange-start 
				to-gradient-orange-end;
		}
	}

	&--turquoise {
		&.Theme__bg, .Theme__bg:not(.Theme) {
			@apply
				bg-gradient-to-r 
				from-gradient-turquoise-start 
				to-gradient-turquoise-end;
		}

		&.Theme__overlay, .Theme__overlay {
			@apply absolute
				top-0
				right-0
				bottom-1/3
				left-0
				bg-gradient-to-b 
				from-blue 
				to-transparent;
		}
	}

	&--violet {
		&.Theme__bg, .Theme__bg:not(.Theme) {
			@apply
				bg-gradient-to-r 
				from-gradient-violet-start 
				to-gradient-violet-end;
		}
	}

	&--gray {
		&.Theme__bg, .Theme__bg:not(.Theme) {
			@apply bg-gray-200;
		}

		&.Theme__bg, .Theme__bg {
			&, *:not(input, select, .Button, .Block__title, h1, h2, h3, h4, h5, h6, .Card__copy p) {
				@apply text-black;

				.copy {
					span {
						@apply text-black #{!important};
					}
				}
			}

			.Button--ghost {
				@apply border-blue;
			}
		}
	}

	&--featured {
		@apply relative
			bg-gray-200;
			

		.Theme__bg {
			@apply bg-gradient-to-b
				from-gray-300
				to-gray-100
				to-60%;
		}
	}

	.Theme__bg {
		&.Block__contents {
			@apply rounded-md 
				py-8
				px-6  
				xs:py-10
				xs:px-8  
				md:py-12
				md:px-11;
		}
	}
}

.Theme--none + .Theme--none {
	.container {
		@apply pt-0;
	}
}