hippie-style/modules/explanation/_explanation_module.scss

@use "sass:color";
@use "sass:math";

@use "../../global/config";
@use "../../global/common";
@use "../../functions/color" as *;
@use "../../mixins/vendor";

%expose_after {
	&::after {
		content: "";
		display: block;
		height: 48px;
		background-color: rgba(basic_color(delta), 0.1) !important;
	}
}

%expose_before {
	&::before {
		content: "";
		display: block;
		height: 48px;
		background-color: rgba(basic_color(delta), 0.1) !important;
	}
}

%expose {
	&::before, &::after {
		content: "";
		display: block;
		height: 48px;
		background-color: rgba(basic_color(delta), 0.1) !important;
	}
}

// %exp {
// }
%exp_hidden {
	display: none;
}

.exp_wrap {
	position: relative;
}

.exp_overlay {
	@extend %full_parent;
	background-color: color.adjust(basic_color(alpha), $alpha: -0.6);
}

.exp_pop {
	@extend %exp_hidden !optional;
	position: absolute;
	z-index: 100;
	top: config.$space_large;
	left: config.$space_large;
	padding: config.$space_half;
	border: 4px solid config.$color_back_basic;
	border-radius: 4px;
	background-color: config.$color_back_basic;
	pointer-events: none;
}

.exp_marker_pop {
	position: absolute;
	top: math.div(-(config.$size_text_basic), 4) * 3;
	right: math.div(-(config.$size_text_basic), 2);
	width: config.$size_text_basic;
	height: config.$size_text_basic;
	border: config.$space_tiny solid config.$color_highlight_basic;
	border-radius: config.$size_text_basic;
	color: config.$color_highlight_basic;
	background-color: config.$color_darkest;
}

.exp_expose {
	@extend %expose !optional;
}

.exp_expose_pre {
	@extend %expose_after;
}

.exp_expose_post {
	@extend %expose_before;
}

.exp_overlay_btn {
	position: fixed;
	width: 3em;
	height: 2em;
	// padding: $space_basic $space_basic * 2;
	cursor: pointer;
}

.exp_help_btn {
	display: table;
	right: config.$space_double;
	bottom: config.$space_double;
	background-color: rgba(config.$color_darkest, 0.4);

	&:hover {
		background-color: config.$color_brightest;

		> .span_solo {
			color: config.$color_darkest;
		}
	}

	.span_solo {
		display: table-cell;
		color: rgba(config.$color_brightest, 0.8);
		font-family: config.$family_text_mono;
		font-size: 1.4em;
		text-align: center;
		vertical-align: middle;
	}
}


.expose_height {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(basic_color(delta), 0.1) !important;
	@include vendor.vendor-prefix(transition, height 0.5s ease);
}