hippie-style/elements/_grouping.scss

@use "sass:color";

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

// Grouping content
// -----------------------------------------------------------------------------
// p
// address
// hr
// pre
// blockquote
// ol
// ul
// menu
// li
// dl
// dt
// dd
// figure
// figcaption
// main
// div


@mixin columns($count: 5) {
	@for $i from 1 through $count {
		.column_#{$i} {
			@extend p;

			column-count: #{$i};
			column-gap: if($i < 3, config.$space_small, config.$space_medium);
		}
	}
}


// Paragraph
// -----------------------------------------------------------------------------
p {
	@extend %basic;
	margin-top: config.$space_basic;
	margin-bottom: config.$space_basic;
}

.column_line {
	column-rule: config.$border_basic;
}

@include columns();

// Address
// -----------------------------------------------------------------------------
address {
	// @extend %basic;
	margin-top: config.$space_double;
	margin-bottom: config.$space_double;
}

// Line
// -----------------------------------------------------------------------------
hr {
	margin-top: config.$space_small;
	margin-bottom: config.$space_small;
	border-width: config.$width_border_basic 0 0;
	border-style: solid;
	border-color: config.$color_border_basic;

	&.hidden {
		border-color: transparent;
	}

	&.dotted {
		border-style: dotted;
	}

	&.double {
		height: 4px;
		border-width: config.$width_border_basic 0;
	}

	&.vertical {
		display: inline;
		margin: 0 config.$space_double;
		border-width: 0 config.$width_border_basic 0 0;
	}
}

// Preformat
// -----------------------------------------------------------------------------
pre {
	@extend %basic_mono;
	white-space: pre-wrap;
}

.pre_code {
	overflow-x: auto;
	border-color: color.scale(config.$color_back_basic, $lightness: -(config.$color_diff_tiny));
	border-style: dotted;
	border-width: 0 0 0 config.$width_border_4;
	border-radius: config.$radius_basic;
	padding: config.$space_basic;
	background-color: color.scale(config.$color_back_basic, $lightness: config.$color_diff_tiny);

	code {
		background-color: transparent;
	}
}

// Quote
// -----------------------------------------------------------------------------
blockquote {
	margin: config.$space_basic 0;
	padding-right: config.$indent_basic;
	padding-left: config.$indent_basic;
}

.quote_mark {
	p::before {
		content: "\201E \0020";
	}

	p::after {
		content: "\0020 \201C";
	}

	.quote_source {

		&::before,
		&::after {
			content: "";
		}
	}
}

// List
// -----------------------------------------------------------------------------
dl,
ul,
ol {
	margin: config.$space_double 0;

	&.block {
		padding: 1em 5em;
		background-color: config.$color_darker;
	}
}

ul,
ol {
	padding-left: config.$indent_basic;

	&.horizontal {
		overflow: auto;

		li {
			@extend .float_space_left;
		}
	}

	&.link {
		li {
			margin-bottom: config.$space_tiny * 2;
			text-transform: uppercase;

			a {
				display: block;
				padding: config.$padding_basic;
				color: config.$color_text_basic;

				img {
					margin-right: config.$space_basic;
					padding-bottom: 0.2em;
					vertical-align: text-bottom;
				}

				&:active,
				&:focus,
				&:hover {
					background-color: config.$color_action_basic;
					color: config.$color_highlight_basic;
				}
			}
		}
	}
}

menu {
	margin: 0;
}

dl {
	margin-left: config.$indent_basic;
}

li,
dt,
dd {
	@extend %basic;
}

dd,
.list_basic li {
	margin-bottom: config.$space_basic;
}

dd {
	margin-left: config.$indent_basic;
}

ul {
	li {
		list-style: square;
	}
}

.list_dash {
	li {
		list-style: none;
		position: relative;

		&::before {
			content: "_";
			position: absolute;
			left: -1em;
		}
	}
}

// Embedded
// -----------------------------------------------------------------------------
figure {
	margin: config.$space_double config.$indent_basic;
}

figcaption {
	@extend %basic;
	color: config.$color_darker;
}

// Main content
// -----------------------------------------------------------------------------
main {
}

// Div
// -----------------------------------------------------------------------------
div {
}

.div_info {
	padding: config.$space_double config.$indent_basic;
	border-right: config.$space_basic solid rgba(basic_color(echo), 0.6);
	background-color: rgba(basic_color(echo), 0.1) !important;
}

.box_space {
	position: relative;
	overflow: auto;
	width: 100%;
}

.box_cube {
	float: left;
	display: table;
	width: config.$space_medium;
	text-align: center;
	vertical-align: middle;

	span {
		display: table-cell;
	}
}

.box_placeholder {
	width: 100%;
	height: config.$space_medium;
	border: config.$width_border_4 solid color.adjust(basic_color(alpha), $alpha: -0.1);
	border-radius: config.$radius_basic;
	background-color: color.adjust(basic_color(alpha), $alpha: -0.2);
}

.box_placeholder_bkg {
	width: 100%;
	height: config.$space_medium * 2;
	border: config.$width_border_4 solid color.adjust(config.$color_front_basic, $alpha: -0.1);
	border-radius: config.$radius_basic;
	padding: config.$space_basic;
	/*data:[<mime type>][;charset=<charset>][;base64],<encoded data>*/
	background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' width='100%' height='100%'><line x1='0' y1='0' x2='100%' y2='100%' stroke='%23FFF' stroke-width='.5'/><line x1='0' y1='100%' x2='100%' y2='0' stroke='%23FFF' stroke-width='.5'/></svg>") no-repeat;
	background-color: color.adjust(config.$color_front_basic, $alpha: -0.1);
}

.box_file_tile {
	@extend .float_space_left;
}

// Flex
.flex {
	display: flex;

	&.inline {
		@extend %flex-inline;
	}

	&.stretch {
		flex-flow: row wrap;
		align-items: stretch;
		justify-content: space-between;
		gap: config.$space_half config.$space_basic;

		& > * {
			flex: auto;
		}
	}
}

// Grid
.grid {
	display: grid;
	grid-gap: config.$space_basic;

	& > input,
	& > select,
	& > textarea {
		margin: 0;
	}

	& > label {
		margin: config.$width_border_io;
		padding: config.$space_half;
	}
}

.grid_column_2 {
	grid-template-columns: max-content max-content;

}

.grid_column_4 {
	grid-template-columns: max-content max-content max-content max-content;
}

// Sprites
.sprite_img {
	display: inline-block;
}