@function beyond-font-path($path) {

@if $beyond-use-helper {
  @return font-path($path);
}
@return $path

}

@function beyond-image-path($path) {

@if $beyond-use-helper {
  @return image-path($path);
}
@return $path

}

@mixin size($size) {

width: $size;
height: $size;

}

@mixin y-scroll {

overflow-y: auto;
-webkit-overflow-scrolling: touch;

}

@mixin focus-outline {

outline: 0;
box-shadow: 0 0 0 1px rgba(60, 66, 87, .16),
  0 1px 1px 0 rgba(0, 0, 0, .12),
  0 0 0 4px rgba(58, 151, 212, .28);

}

@mixin ripple($size, $left, $top) {

&.ripple:before {
  top: $top;
  left: $left;
  overflow: visible;
  transition: .3s all;
  position: absolute;
  content: '';
  border-radius: 100%;
  display: block;
  z-index: -1;
  @include size($size);
  background-color: #e6e9ea;
  opacity: 0;
  transform: scale(.6);
}
&.ripple:hover {
  &:before {
    opacity: .5;
    transform: scale(1);
  }
}

}

@mixin absolute-center {

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;

}

@mixin flex-center {

display: flex;
justify-content: space-between;
align-items: center;

}

@function space-classname($type, $side, $i, $size: '') {

@if $size == '' {
  @return #{$type}#{$side}-#{$i};
}
@return #{$type}#{$side}-#{$size}-#{$i};

}

@mixin space-props($type, $side, $i, $size: '') {

$spacer: 1rem;
$space: $spacer * $i * .25;
$prop: 'margin';

@if $space == 0rem {
  $space: 0;
}
@if $type == 'p' {
  $prop: 'padding';
}
$classname: space-classname($type, $side, $i, $size);

.#{$classname} {
  @if $side == '' {
    #{$prop}: $space !important;
  }
  @else if $side == 't' {
    #{$prop}-top: $space !important;
  }
  @else if $side == 'b' {
    #{$prop}-bottom: $space !important;
  }
  @else if $side == 'l' {
    #{$prop}-left: $space !important;
  }
  @else if $side == 'r' {
    #{$prop}-right: $space !important;
  }
  @else if $side == 'x' {
    #{$prop}-left: $space !important;
    #{$prop}-right: $space !important;
  }
  @else if $side == 'y' {
    #{$prop}-top: $space !important;
    #{$prop}-bottom: $space !important;
  }
  @else {
    @error "Unknown side #{$side}.";
  }
}

}

@mixin each-space-props($size: '') {

@each $type in $space-types {
  @each $side in $sides {
    @for $i from 0 through $space-size-max {
      @include space-props($type, $side, $i, $size);
    }
  }
}

}