@mixin base-text($fontSize:1.8rem, $fontWeight:400, $lineHeight:1.2em, $letterSpacing:0, $textTransform:none){
    font-size:$fontSize;
    font-weight:$fontWeight;
    line-height:$lineHeight;
    letter-spacing:$letterSpacing;
    text-transform:$textTransform;
}

@mixin color($color){
    color:$color;
}

@mixin transition($transition: 0.3s){
    -webkit-transition:all $transition ease;
    -moz-transition:all $transition ease;
    -ms-transition:all $transition ease;
    -o-transition:all $transition ease;
    transition:all $transition ease;
}

@mixin transformTranslate($x:-50%, $y:-50%){
    -moz-transform:translateX($x) translateY($y); -webkit-transform:translateX($x) translateY($y); -o-transform:translateX($x) translateY($y); -ms-transform:translateX($x) translateY($y); transform:translateX($x) translateY($y);
}

@mixin transformTranslateX($x:-50%){
    -moz-transform:translateX($x); -webkit-transform:translateX($x); -o-transform:translateX($x); -ms-transform:translateX($x); transform:translateX($x);
}

@mixin transformTranslateY($y:-50%){
    -moz-transform:translateY($y); -webkit-transform:translateY($y); -o-transform:translateY($y); -ms-transform:translateY($y); transform:translateY($y);
}

@mixin shadow($level: 1){
    @if $level == 1 {box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);}
    @else if $level == 2 {box-shadow:0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);}
    @else if $level == 3 {box-shadow:0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);}
    @else if $level == 4 {box-shadow:0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);}
    @else if $level == 5 {box-shadow:0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);}
}

@mixin gradientText(){
    background: rgb(145,150,157);
    background: -moz-linear-gradient(left,  rgba(145,150,157,1) 0%, rgba(88,230,207,1) 33%, rgba(221,232,170,1) 66%, rgba(145,150,157,1) 100%);
    background: -webkit-linear-gradient(left,  rgba(145,150,157,1) 0%,rgba(88,230,207,1) 33%,rgba(221,232,170,1) 66%,rgba(145,150,157,1) 100%);
    background: linear-gradient(to right,  rgba(145,150,157,1) 0%,rgba(88,230,207,1) 33%,rgba(221,232,170,1) 66%,rgba(145,150,157,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#91969d', endColorstr='#91969d',GradientType=1 );
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; text-fill-color:transparent;
}

@mixin underscoreText($bgColor:#000){
    content:" ";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:1px;
    background-color:$bgColor;
}

@mixin fullPosition($position:absolute){
    position:$position;
    left:0;
    top:0;
    width:100%;
    height:100%;
}

@mixin contentAbsolute(){
    content:" ";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
}



@mixin border-radius($radius: 3px) {
    -webkit-border-radius: $radius !important;
    -moz-border-radius: $radius !important;
    border-radius: $radius !important;

    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

@mixin opacity($opacity: 0.5) {
    -webkit-opacity: $opacity;
    -moz-opacity: $opacity;
    opacity: $opacity;
}

@mixin bgsize($size: cover) {
    -webkit-background-size: $size !important;
    -moz-background-size: $size !important;
    -o-background-size: $size !important;
    background-size: $size !important;
}

@mixin disableselect(){
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
     -khtml-user-select: none; /* Konqueror */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  not supported by any browser */
}

@mixin transform($x, $y){
    -moz-transform: translateX($x) translateY($y);
    -webkit-transform: translateX($x) translateY($y);
    -o-transform: translateX($x) translateY($y);
    -ms-transform: translateX($x) translateY($y);
    transform: translateX($x) translateY($y);
}

@mixin shadow($level: 1) {
    @if $level == 1 {box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);}
    @else if $level == 2 {box-shadow: 0 0px 8px rgba(0,0,0,0.06), 0 0px 8px rgba(0,0,0,0.10);}
    @else if $level == 3 {box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);}
    @else if $level == 4 {box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);}
    @else if $level == 5 {box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);}
}


@function convert-angle($value, $unit) {
  $convertable-units: deg grad turn rad;
  $conversion-factors: 1 (10grad/9deg) (1turn/360deg) (3.1415926rad/180deg);
  @if index($convertable-units, unit($value)) and index($convertable-units, $unit) {
    @return $value
             / nth($conversion-factors, index($convertable-units, unit($value)))
             * nth($conversion-factors, index($convertable-units, $unit));
  }

  @warn "Cannot convert `#{unit($value)}` to `#{$unit}`.";
}

/// Test if `$value` is an angle
/// @param {*} $value - Value to test
/// @return {Bool}
@function is-direction($value) {
  $is-direction: index((to top, to top right, to right top, to right, to bottom right, to right bottom, to bottom, to bottom left, to left bottom, to left, to left top, to top left), $value);
  $is-angle: type-of($value) == 'number' and index('deg' 'grad' 'turn' 'rad', unit($value));

  @return $is-direction or $is-angle;
}

/// Convert a direction to legacy syntax
/// @param {Keyword | Angle} $value - Value to convert
/// @require {function} is-direction
/// @require {function} convert-angle
@function legacy-direction($value) {
  @if is-direction($value) == false {
    @warn "Cannot convert `#{$value}` to legacy syntax because it doesn't seem to be an angle or a direction";
  }

  $conversion-map: (
    to top          : bottom,
    to top right    : bottom left,
    to right top    : left bottom,
    to right        : left,
    to bottom right : top left,
    to right bottom : left top,
    to bottom       : top,
    to bottom left  : top right,
    to left bottom  : right top,
    to left         : right,
    to left top     : right bottom,
    to top left     : bottom right
  );

  @if map-has-key($conversion-map, $value) {
    @return map-get($conversion-map, $value);
  }

  @return 90deg - convert-angle($value, 'deg');
}

/// Mixin printing a linear-gradient
/// as well as a plain color fallback
/// and the `-webkit-` prefixed declaration
/// @access public
/// @param {String | List | Angle} $direction - Linear gradient direction
/// @param {Arglist} $color-stops - List of color-stops composing the gradient
@mixin linear-gradient($direction, $color-stops...) {
  @if is-direction($direction) == false {
    $color-stops: ($direction, $color-stops);
    $direction: 180deg;
  }

  background: nth(nth($color-stops, 1), 1);
  background: -webkit-linear-gradient(legacy-direction($direction), $color-stops);
  background: linear-gradient($direction, $color-stops);
}

@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -webkit-flex:  $values;
  -ms-flex:  $values;
  flex:  $values;
}

@mixin order($val) {
  -webkit-box-ordinal-group: $val;
  -moz-box-ordinal-group: $val;
  -ms-flex-order: $val;
  -webkit-order: $val;
  order: $val;
}