@use "../variables-site/structure";
@use "../variables-site/transitions";

@mixin media( $res ) {
	@if mobileonly == $res {
		@media only screen and ( max-width: structure.$mobile_width - 1 ) {
			@content;
		}
	}

	@if mobile == $res {
		@media only screen and ( min-width: structure.$mobile_width ) {
			@content;
		}
	}

	@if tabletonly == $res {
		@media only screen and ( max-width: #{ structure.$tablet_width - 1 } ) {
			@content;
		}
	}

	@if tablet == $res {
		@media only screen and ( min-width: structure.$tablet_width ) {
			@content;
		}
	}

	@if narrowdesktop == $res {
		@media only screen and ( min-width: structure.$narrow_desktop_width ) {
			@content;
		}
	}

	@if notdesktop == $res {
		@media only screen and ( max-width: #{ structure.$desktop_width - 1 } ) {
			@content;
		}
	}

	@if desktop == $res {
		@media only screen and ( min-width: structure.$desktop_width ) {
			@content;
		}
	}

	@if wide == $res {
		@media only screen and ( min-width: structure.$wide_width ) {
			@content;
		}
	}
}

@mixin link-transition( $attr: color ) {
	transition: $attr transitions.$link_transition ease-in-out;
}

@mixin button-transition() {
	transition: background transitions.$button_transition ease-in-out;
}

@mixin button-all-transition() {
	transition: all transitions.$button_transition ease-in-out;
}

@mixin background-transition() {
	transition: background transitions.$background_transition ease-in-out;
}

@mixin selection {
	::selection {
		@content;
	}
}
