@import './theme';
@import './variables';

@mixin fullWidthHeight {
	width: 100%;
	height: 100%;
}

@mixin imageSize($width, $height) {
	width: $width;
	height: $height;
	background-size: $width $height;
}

@mixin tracking($tracking) {
	letter-spacing: calc( $tracking / 1000 ) * 1em;
}

@mixin defaultFontSettings {
	font-size: 14px;
	font-family: $museo-sans-rounded;
}

@mixin defaultAnchorSettings {
	a {
		@include __theme-color($green-dark, $green);
		text-decoration: underline;
		font-weight: 700;

		&:hover {
			text-decoration: underline;
			@include __theme-color($green, $green-dark50);
		}
	}
}

@mixin defaultAnchorSettingsNoUnderline {
	a {
		@include __theme-color($green-dark, $green);
		text-decoration: none;
		font-weight: 700;

		&:hover {
			@include __theme-color($green, $green-dark50);
		}
	}
}

@mixin defaultFontAndTextSettings {
	@include defaultFontSettings;
	@include theme-color-graydark-else-white;
}

@mixin selectable {
	user-select: text;
	cursor: text;
}

@mixin pillButton {
	border-radius: 500px;
}

@mixin cursorPointer {
	cursor: pointer;

	* {
		cursor: pointer;
	}
}

@mixin stripes($color1: $white, $color2: $gray2) {
	background: repeating-linear-gradient(-65deg, $color1, $color1 24px, $color2 24px, $color2 48px);
}

@mixin stripes2($color1: $white, $color2: $gray2) {
	background: repeating-linear-gradient(110deg, $color1, $color1 15px, $color2 15px, $color2 30px);
}

@mixin dragbar {
	-webkit-user-select: none;
	-webkit-app-region: drag;
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 30px;
	width: 100%;
}

@mixin defaultOutline {
	outline: 2px auto $green;
}

// Screen reader only
@mixin visuallyHidden {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}