@charset "UTF-8";
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/mixins' as mixin;
@use '../../configurations/bem' as bem;
@use '../../configurations/functions' as f;
@use '../../configurations/colors/colors' as colors;
@use '../../configurations/colors/colors-functions' as colorFunc;
@use '../../vendor/baseline/plumber' as plumber;
@use '../../vendor/grid/breakpoints' as breakpoint;

@include mixin.atom(meta) {
	display: flex;
	position: relative;
	align-items: center;
	color: var(--cyberspace-color);
	font-family: var.$font-family-mono;
	text-decoratiosn: none;
	text-transform: uppercase;
	white-space: nowrap;

	@include plumber.plumber(
		$font-size: 1.7,
		$baseline: var.$mono-baseline,
		$leading-bottom: 0
	);

	@include colorFunc.color_values(colorFunc.$colors, 'fill', $prefix: '--', $separator: '-');

	span {
		margin-left: func.to_rem(3px);
	}

	@include bem.b(icon) {
		display: flex;
		flex-shrink: 0;
		align-items: center;
		width: var.$icon-size;
		height: var.$icon-size;
		margin-right: func.rhythm(1);
		color: var(--color-cyberspace);

		svg {
			fill: inherit;
		}
	}

	@include bem.m(light) {
		color: colors.$color-snow;

		@include bem.b(icon) {
			fill: colors.$color-snow;
		}
	}

	@include bem.m(lowercase) {
		text-transform: initial;
	}

	@include bem.m(wrap) {
		white-space: normal;
	}

	@include bem.m(responsive) {
		@include plumber.plumber(
			$font-size: 1.4,
			$baseline: var.$mono-baseline,
			$leading-bottom: 0
		);

		@include breakpoint.bp-up(md) {
			@include plumber.plumber(
				$font-size: 1.6,
				$baseline: var.$mono-baseline,
				$leading-bottom: 0
			);
		}

		@include breakpoint.bp-up(lg) {
			@include plumber.plumber(
				$font-size: 1.7,
				$baseline:var.$mono-baseline,
				$leading-bottom: 0
			);
		}
	}
}