@use 'functions' as *;

$breakpoints: (
	xs: rem(320px),
	sm: rem(550px),
	md: rem(850px),
	lg: rem(992px),
	xl: rem(1250px),
	xxl: rem(1440px),
	fhd: rem(1920px),
);

@mixin bp-down($bp) {
	@if map-has-key($breakpoints, $bp) {
		@media screen and (max-width: map-get($breakpoints, $bp)) {
			@content;
		}
	}

	@else {
		@error "El mixin bp-down() solo recibe los valores #{map-keys($breakpoints)}";
	}
}

@mixin bp-up($bp) {
	@if map-has-key($breakpoints, $bp) {
		@media screen and (min-width: map-get($breakpoints, $bp)) {
			@content;
		}
	}

	@else {
		@error "El mixin bp-up() solo recibe los valores #{map-keys($breakpoints)}";
	}
}

//Mixin para generar descalce en el eje Y del elemento
@mixin translateY($rem) {
	transform: translateY($rem);
}

//Mixin para generar descalce en el eje X del elemento
@mixin translateX($rem) {
	transform: translateX($rem);
}

/*
Mixin para llamar a un ícono. El llamado sería, por ejemplo:
li{
	@include icomoon("icon-arrow-left");
}
*/
@mixin icomoon($icon, $position: "before", $replace: false) {
	@if $replace {
		font-size: 0;
	}

	&:#{$position} {
		content: "\#{$icon}";
		font-family: 'icomoon';
		speak: none;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		line-height: 1;

		@if $replace {
			font-size: $font * 16;
		}

		@content;
	}
}