@use "./functions" as function;


@mixin border-rouded($c1, $c2, $c3, $c4, $c5, $c6, $c7, $c8, $unit: pc) {
	@if $unit == pc {
		border-radius: ($c1 * 1%)
			($c2 * 1%)
			($c5 * 1%)
			($c6 * 1%)
			unquote("/")
			($c8 * 1%)
			($c3 * 1%)
			($c4 * 1%)
			($c7 * 1%);
	}
	@if $unit == px {
		border-radius: ($c1 * 1px)
			($c2 * 1px)
			($c5 * 1px)
			($c6 * 1px)
			unquote("/")
			($c8 * 1px)
			($c3 * 1px)
			($c4 * 1px)
			($c7 * 1px);
	}
}

@mixin border-rounded1($c1, $c2, $unit: pc) {
	@if $unit == pc {
		border-top-left-radius: $c1 * 1% $c2 * 1%;
	}
	@if $unit == px {
		border-top-left-radius: $c1 * 1px $c2 * 1px;
	}
}

@mixin border-rounded2($c1, $c2, $unit: pc) {
	@if $unit == pc {
		border-top-right-radius: $c1 * 1% $c2 * 1%;
	}
	@if $unit == px {
		border-top-right-radius: $c1 * 1px $c2 * 1px;
	}
}

@mixin border-rounded3($c1, $c2, $unit: pc) {
	@if $unit == pc {
		border-bottom-right-radius: $c1 * 1% $c2 * 1%;
	}
	@if $unit == px {
		border-bottom-right-radius: $c1 * 1px $c2 * 1px;
	}
}

@mixin border-rounded4($c1, $c2, $unit: pc) {
	@if $unit == pc {
		border-bottom-left-radius: $c1 * 1% $c2 * 1%;
	}
	@if $unit == px {
		border-bottom-left-radius: $c1 * 1px $c2 * 1px;
	}
}

@mixin from($from) {
	// Si el bp es del core de EDgrid
	@if function.isCoreBreakpoint($from) {
		// no imprime media query para tamaño s
		@if $from == s {
			@content;
		}
		// imprime media query en los otros tamaños
		@else {
			$bp: function.getBp($from);
			@media screen and (min-width: $bp) {
				@content;
			}
		}
	}
	// Si el bp no es del core de EDgrid pero es una unidad válida
	@else if function.isValidBreakpoint($from) {
		@media screen and (min-width: $from) {
			@content;
		}
	}
	// Error
	@else {
		@error 'El mixin from() solo puede recibir un breakpoint del Core (#{map-keys($breakpoints)}) o un número en px, em o rem';
	}
}

@mixin to($to) {
	// Si es un breakpoint del core
	@if function.isCoreBreakpoint($to) {
		@if $to == s {
			@content;
		} @else {
			@media screen and (max-width: (function.getBp($to) - 1px)) {
				@content;
			}
		}
	}
	// Si es un breakpoint válido (px, em, rem)
	@else if function.isValidBreakpoint($to) {
		@media screen and (max-width: (function.toPx($to) - 1px)) {
			@content;
		}
	}
	// Si no es un breakpoint válido lanzar error
	@else {
		@error 'El mixin to() solo puede recibir un breakpoint del Core (#{map-keys($breakpoints)}) o un número en px, em o rem';
	}
}

@mixin fromTo($from, $to) {
	// Si ambos son breakpoints del core
	@if function.isCoreBreakpoint($from) and function.isCoreBreakpoint($to) {
		@if function.getBp($to) > function.getBp($from) {
			@media screen and (min-width: function.getBp($from)) and (max-width: (function.getBp($to) - 1px)) {
				@content;
			}
		} @else {
			@error "El segundo argumento del mixin fromTo debe ser mayor que el primero";
		}
	}

	// Si solo $from es breakpoint del core
	@else if function.isCoreBreakpoint($from) and not function.isCoreBreakpoint($to) {
		@if function.isValidBreakpoint($to) {
			@if function.toPx($to) > function.toPx(function.getBp($from)) {
				@media screen and (min-width: function.getBp($from)) and (max-width: (function.toPx($to) - 1px)) {
					@content;
				}
			} @else {
				@error "El segundo argumento del mixin fromTo debe ser mayor que el primero";
			}
		} @else {
			@error "El segundo argumento del mixin fromTo() debe ser un breakpoint del Core (#{map-keys($breakpoints)}) o un número en px, em o rem";
		}
	}

	// Si solo $to es breakpoint del core
	@else if not function.isCoreBreakpoint($from) and function.isCoreBreakpoint($to) {
		@if function.isValidBreakpoint($from) {
			@if function.toPx(function.getBp($to)) > function.toPx($from) {
				@media screen and (min-width: $from) and (max-width: (function.getBp($to) - 1px)) {
					@content;
				}
			} @else {
				@error "El segundo argumento del mixin fromTo debe ser mayor que el primero";
			}
		} @else {
			@error "El primer argumento del mixin fromTo() debe ser un breakpoint del Core (#{map-keys($breakpoints)}) o un número en px, em o rem";
		}
	}

	// Si no son breakpoints del core pero son breakpoints válidos (px, em, rem)
	@else if function.isValidBreakpoint($from) and function.isValidBreakpoint($to) {
		@if function.toPx($to) > function.toPx($from) {
			@media screen and (min-width: $from) and (max-width: (function.toPx($to) - 1px)) {
				@content;
			}
		} @else {
			@error "El segundo argumento del mixin fromTo debe ser mayor que el primero";
		}
	}

	// Si al menos hay un breakpoint inválido
	@else {
		@error 'Los argumentos del mixin fromTo() deben ser breakpoints del Core (#{map-keys($breakpoints)}) o números en px, em o rem';
	}
}

@mixin ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

// Mixins for heading styles
@mixin heading-font($extrabold: false) {
	line-height: var(--heading-line-height);
	font-family: var(--heading-font);
	letter-spacing: 0.015em;
	font-weight: 400;

}

@mixin bigger-title {
	@include heading-font(true);
	font-size: var(--bigger-font-size);
}

@mixin t1 {
	@include heading-font(true);
	font-size: var(--h1-font-size);
}

@mixin t2 {
	@include heading-font(true);
	font-size: var(--h2-font-size);
}

@mixin t3 {
	@include heading-font;
	font-size: var(--h3-font-size);
}

@mixin t4 {
	@include heading-font;
	font-size: var(--normal-font-size);
}

@mixin t5 {
	@include heading-font;
	font-size: var(--small-font-size);
}

@mixin t6 {
	@include heading-font;
	font-size: var(--smaller-font-size);
}

@mixin body-font {
	font-family: var(--body-font);
	line-height: var(--body-line-height);
	font-weight: 300;
}

@mixin biggest {
	@include body-font;
	font-size: var(--h1-font-size);
}

@mixin bigger {
	@include body-font;
	font-size: var(--h2-font-size);
}

@mixin big {
	@include body-font;
	font-size: var(--h3-font-size);
}

@mixin normal {
	@include body-font;
	font-size: var(--normal-font-size);
}

@mixin small {
	@include body-font;
	font-size: var(--small-font-size);
}

@mixin smaller {
	@include body-font;
	font-size: var(--smaller-font-size);
}

@mixin supersmall {
	@include body-font;
	font-size: var(--supersmall-font-size);
}