@mixin link-underline-variant($color)
	color: $color

	&:after
		background-color: $color

	&:hover
		color: darken($color, 10%)

@mixin bg-soft-variant($parent, $color)
	#{$parent}
		@include gradient-bg($color)

// basic MQ start
@mixin phone
	@media only screen and (max-width: 767px)
		@content

@mixin tablet
	@media only screen and (min-width : 768px) and (max-width: 991px)
		@content

@mixin tablet-ls
	@media only screen and (min-width : 992px) and (max-width: 1100px)
		@content

@mixin desktop
	@media only screen and (min-width : 1100px) and (max-width: 1500px)
		@content

@mixin desktop-sm
	@media only screen and (min-width : 1500px) and (max-width: 1824px)
		@content

@mixin desktop-ls
	@media only screen and (min-width : 1824px)
		@content

// Strict: exact viewport width/height (1536x864 after 125% scaling) + DPR 1.25
@mixin windows-1920-125-strict
  @media only screen and (width: 1536px) and (height: 864px) and (min-resolution: 1.25dppx), only screen and (width: 1536px) and (height: 864px) and (-webkit-min-device-pixel-ratio: 1.25), only screen and (width: 1536px) and (height: 864px) and (min--moz-device-pixel-ratio: 1.25)
    @content

// Flexible: target typical desktop CSS viewport after 125% scaling (>=1536 and <=1600) + DPR 1.25
@mixin windows-1920-125
  @media only screen and (min-width: 1536px) and (max-width: 1600px) and (min-resolution: 1.25dppx), only screen and (min-width: 1536px) and (max-width: 1600px) and (-webkit-min-device-pixel-ratio: 1.25), only screen and (min-width: 1536px) and (max-width: 1600px) and (min--moz-device-pixel-ratio: 1.25)
    @content

// DPR-only: apply wherever device-pixel-ratio is ~1.25 (no width checks)
@mixin windows-125-dpr-only
  @media only screen and (min-resolution: 1.25dppx), only screen and (-webkit-min-device-pixel-ratio: 1.25), only screen and (min--moz-device-pixel-ratio: 1.25)
    @content