Bar: Magenta Left

// makes php storm happy. normally it would be enough to add it in styles.scss
@use 'sass:math';

.a-bar {
	$no-sanuk-factor: 1.15;

	font-family: $font-bar;
	font-weight: $font-weight-extra;
	color: $color-white;
	text-transform: uppercase;
	line-height: 1em;
	white-space: nowrap;

	display: inline-block;
	padding: .15em .2em 0;
	margin-bottom: 0.1em;

	&--no-sanuk {
		font-family: 'Passion One Bold', $font-bar; // don't use locally installed sanuk
		font-size: #{$no-sanuk-factor}em;
		padding: 0 .15em 0;
		letter-spacing: 0.02em;
	}

	&--left {
		padding-left: 5em;

		&.a-bar--no-sanuk {
			padding-left: #{math.div(5, $no-sanuk-factor)}em;
		}
	}

	&--right {
		padding-right: 5em;

		&.a-bar--no-sanuk {
			padding-right: #{math.div(5, $no-sanuk-factor)}em;
		}
	}

	&--green {
		background: $color-primary;

		@include high-contrast {
			background: $color-primary-dark;
		}
	}

	&--magenta {
		background: $color-secondary;
	}

	&--white {
		background: $color-white;
		color: $color-primary;

		@include high-contrast {
			color: $color-primary-dark;
		}
	}

	&--subline {
		font-size: 0.4em;

		&.a-bar--no-sanuk {
			font-size: #{0.4*$no-sanuk-factor}em;
		}

		&.a-bar--left {
			padding-left: 12.6em; // +0.1em for identical letter start

			&.a-bar--no-sanuk {
				padding-left: #{math.div(12.6, $no-sanuk-factor)}em;
			}
		}

		&.a-bar--right {
			padding-right: 12.6em; // +0.1em for identical letter start

			&.a-bar--no-sanuk {
				padding-right: #{math.div(12.6, $no-sanuk-factor)}em;
			}
		}
	}
}