hippie-style/elements/_textlevel.scss

@use "sass:color";

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

// Text-Level semantics
// -----------------------------------------------------------------------------
// a
// em
// strong
// small
// s
// cite
// q
// dfn
// abbr
// ruby
// rb
// rt
// rtc
// rp
// data
// time
// code
// var
// samp
// kbd
// sub
// sup
// i
// b
// u
// mark
// bdi
// bdo
// span
// br
// wbr



// Links
// -----------------------------------------------------------------------------
a {
	color: config.$color_link_basic;
	//  color: color.scale($color_action_basic, $lightness: 20%);
	text-decoration: none;

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

.a_internal {
	color: basic_color(charlie);
}

.a_external {
	color: basic_color(delta);
}

.a_discreet {
	color: config.$color_text_basic;
}

.a_line {
	border-bottom-width: config.$space_tiny;
	border-bottom-style: dotted;
	border-color: config.$color_border_basic;
	color: config.$color_text_basic;
	background-color: transparent;
	transition: color config.$duration_basic config.$timing_basic;

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

.a_button {
	display: inline-block;
	padding: config.$padding_basic;
	border-radius: config.$radius_basic;
	background-color: color.adjust(config.$color_link_basic, $alpha: -0.8);

	&:active,
	&:focus,
	&:hover {
		border-color: transparent;
		background-color: color.adjust(config.$color_highlight_basic, $alpha: -0.8);
	}
}

.a_button_text {
	@extend .a_button;
	padding: config.$padding_link;
	color: config.$color_text_basic;
	background-color: transparent;
}

.a_button_border {
	@extend .a_button_text;
	border: config.$border_basic;
}


// Italic, Emphasis
// -----------------------------------------------------------------------------
i, em {
	font-style: italic;
}

.i_bright {
	color: config.$color_highlight_basic;
	font-style: normal;
}

// Bold, Strong
// -----------------------------------------------------------------------------
b, strong {
	font-weight: 500; // TODO maybe bolder
}

// Small
// -----------------------------------------------------------------------------
small {

}

// No longer accurate or no longer relevant
// -----------------------------------------------------------------------------
s {

}

// Citation
// -----------------------------------------------------------------------------
cite {
	font-style: italic;
}

// Phrasing content, quoted
// -----------------------------------------------------------------------------
q {

}

// Definition
// -----------------------------------------------------------------------------
dfn {

}

// Abbreviation
// -----------------------------------------------------------------------------
abbr {

}

// Ruby annotations
// -----------------------------------------------------------------------------
ruby {

}

rb {

}

rt {

}

rtc {

}

rp {

}

// Machine readable data
// -----------------------------------------------------------------------------
data {

}

// Machine readable time
// -----------------------------------------------------------------------------
time {

}

// Code
// -----------------------------------------------------------------------------
code {
	@extend %basic_mono;
	color: color.scale(config.$color_text_basic, $lightness: config.$color_diff_basic);
	background-color: color.scale(config.$color_back_basic, $lightness: config.$color_diff_tiny);
}

p code {
	padding: config.$space_tiny config.$space_half;
	font-size: 1em;
	line-height: 1;
}

.code_solo {
	@extend %basic_mono;
	padding: config.$space_tiny config.$space_half;
	color: config.$color_text_basic;
}

// Variable
// -----------------------------------------------------------------------------
var {

}

// Sample
// -----------------------------------------------------------------------------
samp {
	@extend %basic_mono;
}

// Keyboard input
// -----------------------------------------------------------------------------
kbd {
	@extend %basic_mono;
	// font-size: .9em;
	// font-weight: bold;
	padding: 0 config.$space_half;
	border-width: config.$width_border_basic;
	border-style: solid;
	border-color: config.$color_darker;
	border-radius: config.$radius_basic;
	color: color.scale(config.$color_text_basic, $lightness: config.$color_diff_basic);
}

// Sub- and superscript
// -----------------------------------------------------------------------------
sub, sup {

}

// Unarticulated, non-textual annotation
// -----------------------------------------------------------------------------
u {

}

// Marks
// -----------------------------------------------------------------------------
mark {
	background-color: basic_color(alpha);
}

.mark_cursor {
	color: color.invert(config.$color_text_basic);
	background-color: config.$color_text_basic;
}

::-moz-selection {
	color: color.invert(config.$color_text_basic);
	background-color: config.$color_text_basic;
}

::selection {
	color: color.invert(config.$color_text_basic);
	background-color: config.$color_text_basic;
}

// Text direction
// -----------------------------------------------------------------------------
bdi, bdo {

}

// Span
// -----------------------------------------------------------------------------
span {

}

.span_solo {
	@extend %basic;
}

// Linebreaks
// -----------------------------------------------------------------------------
br {

}

wbr {

}



// Edits
// -----------------------------------------------------------------------------
// ins
// del



ins {

}

del {

}