@function if($condition, $if-value, $else-value) {
	@if ($condition == true) { @return $if-value; }
	@else { @return $else-value; }
}

@function map-deep-get($map, $keys...) {
  $value: $map;
  @each $key in $keys {
    $value: map-get($value, $key);
  }
  @return $value;
}

@mixin input-placeholder {
    &.placeholder { @content; }
    &:-moz-placeholder { @content; }
    &::-moz-placeholder { @content; }
    &:-ms-input-placeholder { @content; }
    &::-webkit-input-placeholder { @content; }
}

@mixin hardware($backface: true, $perspective: 1000) {
    @if $backface { backface-visibility: hidden; }
    perspective: $perspective;
}

@mixin border-radius($radius: $canvas-gui-border-radius) {
	@each $vendor in $vendors {
		#{$vendor}border-radius: $radius;
	}
}

@mixin box-shadow($x, $y, $blur: 0, $spread: 0, $color: null, $inset: null) {
	@each $vendor in $vendors {
		#{$vendor}box-shadow: $x $y $blur $spread $color $inset;
	}
}

@mixin no-select() {
	@each $vendor in $vendors {
		#{$vendor}user-select: none;
	}
}

@mixin gradient($from, $to) {
  background: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
  background: -moz-linear-gradient(top,  $from, $to);
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$from}', endColorstr='#{$to}');
}

@mixin font-smoothing() {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

@mixin button-reset() {
	text-decoration: none;
	border-radius: $canvas-gui-border-radius;
	font-family: $font-family;
	font-weight: 500;
	display: inline-block;
	outline: none;
	border: none;
	line-height: 1;
	font-size: 0.8rem;
	cursor: pointer;
	padding: 0.8rem 1rem;
}

@mixin button($bg: #e3e3e3) {
	@include button-reset();

  background-color: $bg;
  color: darken($bg,80%);
  &:hover {
    background-color:darken($bg,8%);
    transition: all 0.3s ease;
  }
  &:active {
    background-color:darken($bg,25%);
  }
}

@mixin button-config-color($bg) {
  background-color: $bg;
  &:hover {
    background-color: darken($bg,8%);
    transition: all 0.3s ease;
  }
  &:active {
    background-color: darken($bg,15%);
  }
}

@mixin button-config-size($size) {
	@if($size == 'lg') {
		font-size: 2rem;
		padding: 2rem;
	}
	@else {
		font-size: 0.7rem;
		padding: 0.5rem 0.6rem;
	}
}