// //////////////////////////////////////////
// // SLIDE TOGGLE MODULE
// //////////////////////////////////////////

.slide-toggle-module{

	.slide-trigger{
		cursor: pointer;
		@include user-select(none);
		@include module-content($mc-base + 0.1); // THIS LINES IT UP WITH THE ACTUAL $MC-BASE

		&.active,
		&:hover{

			> span{
				background-color: $trigger-background-hover-color;
				color: $trigger-hover-color;


				.icon{
					@include transform(translateX(0) rotate(-90deg));
					background-color: $st-icon-background-hover-color;
				}

				.image-container.b-loaded{
					opacity: 0.5;
				}
			}
		}

		&.active{

			span{

				.icon{

					&::after{
						opacity: 0;
					}
				}
			}
		}

		> span{
			display: block;
			padding: $trigger-padding;
			padding-right: calc(2rem + #{$trigger-line-height*1rem});
			background-color: $trigger-background-color;
			@include transition(background-color 0.3s ease);
			font-size: mm(18, 18);
			position: relative;
			border-radius: 2px;
			overflow: hidden;
			font-family: $headline-font;
			font-weight: 600;
			line-height: $trigger-line-height;
			color: $trigger-color;

			.trigger-title{
				position: relative;
				z-index: 2;
			}

			.icon{
				position: absolute;
				top: 50%;
				right: 1.5rem;
				margin-top: $trigger-line-height*-0.625rem;
				width: $trigger-line-height*1.25rem;
				height: $trigger-line-height*1.25rem;
				text-align: center;
				z-index: 2;
				background-color: $st-icon-background-color;
				border-radius: 100%;
				@include transform(translateX(0));
				@include transform-transition(0.15s ease, background-color 0.3s ease);

				&::before,
				&::after{
					content: '';
					background-color: $st-icon-color;
					display: block; 
					position: absolute;
					@include center(xy);
					border-radius: 2px;
					opacity: 1;
					@include transition(opacity 0.3s ease);
				}

				&::before{
					height: 40%;
					width: 2px;
				}

				&::after{
					width: 40%;
					height: 2px;
				}
			}
		}

		.image-container{
			@include image-container;
			z-index: 1;

			&::after{
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: $black;
				opacity: 0.4;
				mix-blend-mode: multiply;
			}
		}
	}

	.slide-toggle{
		display: none;

		& > .module{

			.module-content{
				@include module-content($mc-base - 0.25);
			}

			&:first-child{
				padding-top: $module-spacing;
			}

			&:last-child{
				padding-bottom: $module-spacing;
			}
		}
	}
}