// SIZE


// Spacing Unitless Function
// margin-bottom: size(24half); 0.75em | 12px
$sizes-values: (
  none: 0,
  auto: auto,
  half: 50%,
  full: 100%
);

@function size($value) {

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

  @else if type-of($value) == number and unit($value) == '' {
    @return base24($value);
  }

  @else {
    @return $value;
  }
}

// Size
// .example_class {
//   @include sizeXY(full);
// }
@mixin sizeXY($value) {

  width: size($value);
  height: size($value);

}

// SizeX
// .example_class {
//   @include sizeX(full);
// }
@mixin sizeX($value) {

  width: size($value);

}

// SizeY
// .example_class {
//   @include sizeY(full);
// }
@mixin sizeY($value) {

  height: size($value);

}

// Size
// .example_class {
//   @include size(half, full);
// }
@mixin size($heightValue, $widthValue:null) {

  @if $heightValue and $widthValue {

    @include sizeX($widthValue);
    @include sizeY($heightValue);

  } @else {

    @include sizeXY($heightValue);

  }

}