@use "../variables.scss";

@mixin text-styles {
	.red   { color: rgb(var(--color-red)) }
	.green { color: rgb(var(--color-green)) }
	.blue  { color: rgb(var(--color-blue)) }
	.cyan  { color: rgb(var(--color-cyan)) }
	.bold  { font-weight: bold; }
}

@mixin stdout-layouts {
	.stdout-vertical { display: grid; }
	.stdout-horizontal {
		display: flex;
		gap: 30px;
	}
	.stdout-horizontal-wrap {
		display: flex;
		gap: 5px;
	}
}

@mixin term-elements {
	.return { margin-top: 25px; }
	.shell-prompt { display: flex; }
	.wrap-indicator {
		width: 2px;
		background-color: rgba(var(--color-blue), .3);
	}
}

@mixin formatting {
	@include stdout-layouts;
	@include term-elements;
	@include text-styles;

	p, a, span {
		font-size: variables.$default-font-size
	}
	p {
		margin: 5px;
		a:hover { text-decoration: underline; }
	}
}