// Font Size
@use "sass:math";

@mixin font-size($pixel: 14, $context: 14) {
  font-size: #{$pixel}px;
  font-size: #{math.div($pixel, $context)}em;
}

// Letter Spacing
@mixin letter-spacing($value: 1) {
  letter-spacing: ($value * 0.001) * 1em;
}

// Line Height
@mixin line-height($pixel: 14, $context: 14) {
  line-height: #{$pixel}px;
  line-height: #{math.div($pixel, $context)}em;
}

// Center block
@mixin center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Clearfix AB
@mixin clearfixab() {

  &:before,
  &:after {
    content: "";
    display: table;
  }

  &:after {
    clear: both;
  }
}

// Clearfix
@mixin clearfix() {
  content: "";
  display: table;
  table-layout: fixed;
}

// Clear after (not all clearfix need this also)
@mixin clearfix-after() {
  clear: both;
}

// Column width with margin
@mixin column-width($numberColumns: 3) {
  width: map-get($columns, $numberColumns) - math.div($columns__margin * ($numberColumns - 1), $numberColumns);
}

// Clearfix for with before & after
@mixin clearfixba() {

  &:before,
  &:after {
    content: "";
    display: table;
  }

  &:after {
    clear: both;
  }
}


@mixin background($imgpath, $position: center, $size: cover, $repeat: no-repeat) {
  background: {
    image: url($imgpath);
    position: $position;
    repeat: $repeat;
    size: $size;
  }
}

@mixin transform_time($total_time) {
  -webkit-transition: $total_time;
  transition: $total_time;
}

@mixin placeholder {
  &.placeholder {
    @content;
  }

  &:-moz-placeholder {
    @content;
  }

  &::-moz-placeholder {
    @content;
  }

  &::-webkit-input-placeholder {
    @content;
  }
}

@mixin transition($args: all 0.6s ease 0s) {
  -webkit-transition: $args;
  -moz-transition: $args;
  -o-transition: $args;
  transition: $args;
}

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content;
  }

  @-moz-keyframes #{$name} {
    @content;
  }

  @-ms-keyframes #{$name} {
    @content;
  }

  @keyframes #{$name} {
    @content;
  }
}

@mixin animation($animation) {
  -webkit-animation: #{$animation};
  -moz-animation: #{$animation};
  -ms-animation: #{$animation};
  animation: #{$animation};
}

@mixin transform($transform) {
  -webkit-transform: $transform;
  -moz-transform: $transform;
  -ms-transform: $transform;
  transform: $transform;
}

@include keyframes(bounce) {

  0%,
  20%,
  50%,
  80%,
  100% {
    @include transform(translateY(0));
  }

  40% {
    @include transform(translateY(-20px));
  }

  60% {
    @include transform(translateY(-10px));
  }
}

$transition_function: cubic-bezier(0.4, 0, 0.2, 1);
$spacer_90: 90px;
$spacer_80: 80px;
$spacer_70: 70px;
$spacer_60: 60px;
$spacer_55: 55px;
$spacer_50: 50px;
$spacer_45: 45px;
$spacer_40: 40px;
$spacer_35: 35px;
$spacer_30: 30px;
$spacer_25: 25px;
$spacer_20: 20px;

@mixin animate($property: all, $ease: $transition_function, $duration: 0.4s) {
	-webkit-transition: $property $ease $duration;
	-moz-transition: $property $ease $duration;
	-o-transition: $property $ease $duration;
	transition: $property $ease $duration;
}

@mixin animate_with_delay($property: all, $ease: $transition_function, $duration: 0.4s, $delay: 2s) {
	-webkit-transition: $property $ease $duration $delay;
	-moz-transition: $property $ease $duration $delay;
	-o-transition: $property $ease $duration $delay;
	transition: $property $ease $duration $delay;
}

@mixin spacer40($property: padding) {
	#{$property}: $spacer_40;
	
	@include note_screen() {
		#{$property}: $spacer_30;
	}

	@include tablet_screen() {
		#{$property}: $spacer_30;
	}
	
	@include sm_screen() {
		#{$property}: $spacer_20;
	}
}

@mixin spacer70($property: padding) {
	#{$property}: $spacer_70;

	@include note_screen() {
		#{$property}: $spacer_60;
	}

	@include tablet_screen() {
		#{$property}: $spacer_40;
	}
}

@mixin border_radius($radius: 4px) {
	-webkit-border-radius: $radius;
	border-radius: $radius;
}

// Flip up animation

@mixin flip_up() {
  opacity: 0;
  visibility: hidden;
  @include animate();
  transform-origin: 50% -50px;
  transform: perspective(300px) rotateX(-15deg);
}

@mixin flip_up_active() {
transform: none;
visibility: visible;
  opacity: 1;
}

// Fade up animation

@mixin fade_up() {
	transform: translateY(10px);
	opacity: 0;
    visibility: hidden;
    @include animate();
}

@mixin fade_up_active() {
	transform: none;
	visibility: visible;
    opacity: 1;
}

// Fade down animation

@mixin fade_down() {
	transform: translateY(-10px);
	opacity: 0;
    visibility: hidden;
    @include animate();
}

@mixin fade_down_active() {
	transform: none;
	visibility: visible;
    opacity: 1;
}

@mixin dropdown_shadow() {
	-webkit-box-shadow: 0 20px 32px -8px rgba(0, 0, 0, .15), 0 0 1px rgba(0, 0, 0, .05);
	box-shadow: 0 20px 32px -8px rgba(0, 0, 0, .15), 0 0 1px rgba(0, 0, 0, .05);
}

// Flex with center alignment

@mixin flex_center() {
	display: flex;
	align-items: center;
}

// Fluid typography

@mixin fluid-type($min-font-size: 28px, $max-font-size: 72px, $lower-range: 576px, $upper-range: 1600px) {

	font-size: calc(#{$min-font-size} + #{(math.div($max-font-size, $max-font-size * 0 + 1) - math.div($min-font-size, $min-font-size * 0 + 1))} * ( (100vw - #{$lower-range}) / #{(math.div($upper-range, $upper-range * 0 + 1) - math.div($lower-range, $lower-range * 0 + 1))}));
  
	@media screen and (max-width: $lower-range) {
		font-size: $min-font-size;
	}

	@media screen and (min-width: $upper-range){
		font-size: $max-font-size;
	}
}