hippie-style/global/_common.scss

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

@use "config";
@use "../functions/color" as *;
@use "../mixins/media_query" as *;
@use "../mixins/user_agent" as *;

// Common styles for global usage
// -----------------------------------------------------------------------------

// General classes
// -----------------------------------------------------------------------------
.di_none {
	display: none !important;
}

.op_hide {
	opacity: 0 !important;
}

.op_show {
	opacity: 1 !important;
}

.space_even_auto {
	margin-right: auto;
	margin-left: auto;
}

.space_even_half {
	margin-right: 25%;
	margin-left: 25%;
}

.space_even_fourth {
	margin-right: 37.5%;
	margin-left: 37.5%;
}

@each $size, $variable in (basic, #{config.$space_basic}),
	(small, #{config.$space_small}),
	(medium, #{config.$space_medium}),
	(large, #{config.$space_large}) {
	.space_top_#{$size} {
		margin-top: $variable;
	}

	.space_right_#{$size} {
		margin-right: $variable;
	}

	.space_bottom_#{$size} {
		margin-bottom: $variable;
	}

	.space_left_#{$size} {
		margin-left: $variable;
	}
}

.space_left_fourth {
	margin-left: 25%;
}

.width_full {
	width: 100%;
	margin-right: 0;
	margin-left: 0;
}

.width_half {
	width: 50%;
	margin-right: 0;
	margin-left: 0;
}

.width_third {
	width: 33.3%;
	margin-right: 0;
	margin-left: 0;
}

.h_basic {
	height: 1024px;
}

.h_full_view {
	height: 100vh;
}

.h_100 {
	height: 100%;
}

.wrap_center {
	& > * {
		margin-right: math.div((100% - config.$width_basic), 2);
		margin-left: math.div((100% - config.$width_basic), 2);

		@include forTabletPortraitUp {
			margin-right: math.div((100% - config.$width_small), 2);
			margin-left: math.div((100% - config.$width_small), 2);
		}

		@include forTabletLandscapeUp {
			margin-right: math.div((100% - config.$width_medium), 2);
			margin-left: math.div((100% - config.$width_medium), 2);
		}

		@include forBigDesktopUp {
			margin-right: math.div((100% - config.$width_large), 2);
			margin-left: math.div((100% - config.$width_large), 2);
		}
	}
}


// Clearing and floating
// -----------------------------------------------------------------------------
.clear {
	clear: both;

	&::before,
	&::after {
		clear: both;
	}
}

.overflow {
	overflow: auto;
}

.float_left {
	float: left;
}

.float_right {
	float: right;
}

.float_space_left {
	float: left;
	margin-right: config.$space_small;
}

.float_half_size {
	float: left;
	width: 50%;
}

.x_long {
	overflow-x: scroll;
}


// Inlining
// -----------------------------------------------------------------------------
.inline {
	display: inline-block;
}


// Flex & grid
// -----------------------------------------------------------------------------
%flex_inline {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-start;
	gap: config.$space_half config.$space_basic;
}

%flex_column,
%flex_row {
	display: flex;
	flex-wrap: nowrap;
	gap: config.$space_basic;
}

%flex_column {
	flex-direction: column;
}

%flex_row {
	flex-direction: row;
}


// Positioned elements
// -----------------------------------------------------------------------------
%viewport_fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
}

%full_parent {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	// width: 100%;
	// height: 100%;
}

.pos_abs {
	position: absolute;
}

.pos_rel {
	position: relative;
}

.pos_fix {
	position: fixed;
}

.pin_top {
	top: 0;
}

.pin_right {
	right: 0;
}

.pin_bottom {
	bottom: 0;
}

.pin_left {
	left: 0;
}

.pos_full_view {
	@extend %viewport_fixed;
	background-color: rgba(basic_color(alpha), 0.5);
}

.pos_full_page {
	@extend %full_parent;
	background-color: rgba(basic_color(charlie), 0.25);
}

.hover_back_change {
	background-color: config.$color_darker;
	transition: background-color 0.2s ease-in-out;

	&:hover {
		background-color: config.$color_back_basic;
	}
}

#mouse_overlay {
	@extend %viewport_fixed;
	z-index: config.$z_heaven;
	transition: background-color config.$duration_long config.$timing_basic config.$duration_long;
	pointer-events: none;

	&.active {
		background-color: color.adjust(config.$color_darkest, $alpha: -0.5);
	}
}


// Colors
// -----------------------------------------------------------------------------
.txt_color_light {
	color: config.$color_brighter;
}

.txt_color_dark {
	color: config.$color_darker;
}


// Text
// -----------------------------------------------------------------------------
.txt_tiny {
	font-size: .5em !important;
}

.txt_smaller {
	font-size: .75em !important;
}

.txt_larger {
	font-size: 1.2em !important;
}

.txt_huge {
	font-size: 3em !important;
}

.txt_hero {
	font-size: config.$size_hero;
}

.txt_center {
	text-align: center !important;
}

.txt_right {
	text-align: right !important;
}

.txt_left {
	text-align: left !important;
}

.txt_top {
	vertical-align: top !important;
}

.txt_bottom {
	vertical-align: bottom !important;
}

.txt_white {
	color: white;
}

.txt_black {
	color: black;
}

.txt_gradient {
	background: linear-gradient(165deg, basic_color(alpha) 30%, basic_color(bravo) 45%, basic_color(charlie) 50%, basic_color(delta), basic_color(echo) 80%, basic_color(foxtrot));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

// Focus
// -----------------------------------------------------------------------------
@include overrideUserAgent(config.$no_agent_focus, config.$io_focus_list);

// Data attributes
// -----------------------------------------------------------------------------
[data-action="drag"] {
	cursor: move;
}