/*********************
Consistent Font Sizes
*********************/
@mixin font-size($sizeValue: 1) {
	font-size: ($sizeValue * 16) * 1px;
	font-size: $sizeValue * 1rem;
}
// fontawesome
@mixin fontawesome{
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}
/*********************
Center Block
*********************/
@mixin center-block {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/*********************
Clearfix
*********************/
@mixin clearfix-after() {
	clear: both;
}
@mixin clear() {
	content: '';
  clear: both;
  display: block;
}
/*********************
transition
*********************/
@mixin transition($time) {
  -webkit-transition: all $time ease-in-out;
  -moz-transition:    all $time ease-in-out;
  -ms-transition:     all $time ease-in-out;
  -o-transition:      all $time ease-in-out;
  transition:         all $time ease-in-out;
}

/*********************
Centering Items
*********************/

@mixin center($horizontal: true, $vertical: true) {
	position: absolute;
	@if ($horizontal and $vertical) {
		top: 50%;
		left: 50%;
    transform: translate(-50%,-50%);
  } 
  @else if ($horizontal) {
    left: 50%;
    transform: translate(-50%,0%);
  } 
  @else if ($vertical) {
    top: 50%;
    transform: translate(0%,-50%);
  }
}
@mixin vcenter{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
@mixin hcenter{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
@mixin top{
  position: absolute;
  top: 0;
  left: 0;
}
@mixin overlay{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
@mixin disable-absolute() {
  position: relative;
  top: 0;
  left: 0;
  transform: translate(0%,0%);
}
@mixin row{
  display: flex;
  flex-wrap: wrap;
  margin-right: -12px;
  margin-left: -12px;
}
@mixin col($target){
  -ms-flex: 0 0 $target;
  flex: 0 0 $target;
  max-width: $target;
  position: relative;
  width: 100%;
  padding-right: 12px;
  padding-left: 12px;
}
/*********************
BREAKPOINTS
*********************/

@mixin breakpoint($point) {
  /* Large Devices, Wide Screens */
  @if $point == wider {
    @media (max-width: 1300px) {
      @content;
    }
  }
    /* Medium Devices, Desktops */
    @else if $point == wide {
      @media (max-width: 1199px) {
        @content;
      }
    }
    /* Medium Devices, Desktops */
    @else if $point == medium {
      @media (max-width: 991px) {
        @content;
      }
    }
    /* Small Devices, Tablets */
    @else if $point == small {
    //@media (max-width : 768px) { @content ; }
    @media (max-width: 767px) {
      @content;
    }
  }
    /* Extra Small Devices, Phones */
    @else if $point == smaller {
      @media (max-width: 575px) {
        @content;
      }
    }
    /* Extra Small Devices, Phones */
    @else if $point == extrasmall {
      @media (max-width: 479px) {
        @content;
      }
    }
    /* Custom, iPhone Retina */
    @else if $point == iPhone5 {
      @media (max-width: 374px) {
        @content;
      }
    }
  }


/*********************
Placeholders for input
*********************/

@mixin optional-at-root($sel) {
  @at-root #{if(not &, $sel, selector-append(&, $sel))} {
    @content;
  }
}

@mixin placeholder {
  @include optional-at-root('::-webkit-input-placeholder') {
    @content;
  }

  @include optional-at-root(':-moz-placeholder') {
    @content;
  }

  @include optional-at-root('::-moz-placeholder') {
    @content;
  }

  @include optional-at-root(':-ms-input-placeholder') {
    @content;
  }
}

/*********************
Animations
*********************/

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

/*********************
Transition
*********************/

// @mixin transition($value) {
//   transition: $value;
// }