@mixin border-radius($amount) {
    border-radius: $amount;
    -moz-border-radius: $amount;
    -webkit-border-radius: $amount;
  }
  
  @mixin background-size($x) {
    background-size: $x;
    -moz-background-size: $x;
    -webkit-background-size: $x;
  }
  
  @mixin background-size-2d($x, $y) {
    background-size: $x $y;
    -moz-background-size: $x $y;
    -webkit-background-size: $x $y;
  }
  
  @mixin box-shadow($string) {
    box-shadow: $string;
    -moz-box-shadow: $string;
    -webkit-box-shadow: $string;
  }
  
  @mixin box-shadow-2d($string1, $string2) {
    box-shadow: $string1, $string2;
    -moz-box-shadow: $string1, $string2;
    -webkit-box-shadow: $string1, $string2;
  }
  
  @mixin box-shadow-3d($string1, $string2, $string3) {
    box-shadow: $string1, $string2, $string3;
    -moz-box-shadow: $string1, $string2, $string3;
    -webkit-box-shadow: $string1, $string2, $string3;
  }
  
  @mixin transition($string) {
    transition: $string;
    -moz-transition: $string;
    -webkit-transition: $string;
  }
  
  @mixin transition-2d($string1, $string2) {
    transition: $string1, $string2;
    -moz-transition: $string1, $string2;
    -webkit-transition: $string1, $string2;
  }
  
  @mixin transition-from($pos, $time) {
    transition: $pos, $time;
    -moz-transition: $pos, $time;
    -webkit-transition: $pos, $time;
  }
  
  @mixin transition-delay($time) {
    transition-delay: $time;
    -moz-transition-delay: $time;
    -webkit-transition-delay: $time;
  }
  
  @mixin transform($string) {
    transform: $string;
    -moz-transform: $string;
    -webkit-transform: $string;
  }
  
  @mixin flex($justify-content: null, $align-items: null,$direction:null, $wrap: null, $gap: null) {
    display: -webkit-flex;
    display: flex;
    justify-content: $justify-content;
    align-items: $align-items;
    flex-direction: $direction;
    flex-wrap: $wrap;
    gap: $gap;
  }
  
  @mixin flex-center($direction:null, $wrap: null, $gap: null) {
    @include flex(center, center, $direction, $wrap, $gap);
  }
  
  @mixin font($size:null, $weight:null, $height:null) {
    font-size: $size;
    font-weight: $weight;
    line-height: $height;
  }
  
  // LTR but compile to LTR-RTL
  @mixin position($pos:null, $top:null, $right:null, $bottom:null, $left:null, $z-index:null) {
    position: $pos;
    inset-block-start : $top;
    inset-inline-end  : $right;
    inset-block-end   : $bottom;
    inset-inline-start: $left;
    z-index           : $z-index;
  }
  
  @mixin box-center{
    margin-right: auto;
    margin-left:  auto;
  }
  
  @mixin button-hover-bg($type: orange) {
    @if $type == green 
    {
      background-color: #00c853;
      background: -moz-linear-gradient(top, #00c853 0, #00c853 100%);
      background: -webkit-linear-gradient(top, #00c853 0, #00c853 100%);
      background: linear-gradient(0deg, #00c853 0, #00c853 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00c853', endColorstr='#00c853',GradientType=0);
    } 
    @else if $type == orange
    {
      background-color: #FDC755;
      background: -moz-linear-gradient(top, rgba(253,199,85,1) 0%, rgba(253,185,71,1) 100%);
      background: -webkit-linear-gradient(top, rgba(253,199,85,1) 0%,rgba(253,185,71,1) 100%);
      background: linear-gradient(to bottom, rgba(253,199,85,1) 0%,rgba(253,185,71,1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdc755', endColorstr='#fdb947',GradientType=0);
    }
  }
  
  @mixin square-box($size) {
    width: $size;
    height: $size;
  }