@import "variables";

// ---------------------------------
// 元素尺寸
// ---------------------------------

.w-100 {
  width: 100%
}

.h-100 {
  height: 100%
}

// ---------------------------------
// 边距
// ---------------------------------
$names: 'extra-small' 'small' 'base' 'medium' 'large' 'extra-large';

$values: $spacing-extra-small $spacing-small $spacing-base $spacing-medium $spacing-large $spacing-extra-large;

@mixin box($property, $classNames, $values, $suffix: null) {
  @each $name in $classNames {
    $i: index($classNames, $name);
    $val: nth($values, $i);
    &-#{$name} {
      #{$property}: $val $suffix;
    }
  }
}

// xx-t-small... xx-b-small...
@mixin direction($propertyName) {

  $classNames: 't' 'b' 'l' 'r';
  $propertyNames: 'top' 'bottom' 'left' 'right';


  @each $name in $classNames {
    $i: index($classNames, $name);
    $val: nth($propertyNames, $i);

    $pName: $propertyName + '-' + $val;

    &-#{$name} {
      @include box($pName, $names, $values);
    }
  }
}

@mixin direction-0($propertyName) {
  $classNames: 't' 'b' 'l' 'r';
  $propertyNames: 'top' 'bottom' 'left' 'right';
  @each $name in $classNames {
    $i: index($classNames, $name);
    $val: nth($propertyNames, $i);

    &-#{$name}-0 {
      #{$propertyName}-#{$val}: 0 !important;
    }
  }
}

$arr: 'm' 'p';
$array: 'margin' 'padding';

// m-    p-
@each $item in $arr {
  $index: index($arr, $item);
  $elem: nth($array, $index);

  .#{$item} {

    // m-0  p-0
    &-0 {
      #{$elem}: 0 !important;
    }

    // m-x p-x
    @include box($elem, $names, $values);

    @each $name in $names {
      $i: index($names, $name);
      $val: nth($values, $i);

      // m-x-0  p-x-0
      @include box($elem, $name + '-0', ($val 0) null);

      // m-0-x  p-0-x
      @include box($elem, '0-' + $name, (0 $val) null);
    }

    // m-(top,l,r,b)-x  p-(top,l,r,b)-x
    @include direction($elem);

    // m-(top,l,r,b)-0  p-(top,l,r,b)-0
    @include direction-0($elem);

  }
}


.m-t--1 {
  margin-top: -1px;
}

.p-t-1 {
  padding-top: 1px;
}

// ---------------------------------
// 定位
// ---------------------------------

.absolute {
  position: absolute
}

.fixed {
  position: fixed
}

.relative {
  position: relative
}

.top-0 {
  top: 0
}

.bottom-0 {
  bottom: 0
}

.left-0 {
  left: 0
}

.right-0 {
  right: 0
}

.pos-center {
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0)
}

.pos-x-center {
  left: 50%;
  transform: translate3d(-50%, 0, 0);
}

.pos-y-center {
  top: 50%;
  transform: translate3d(0, -50%, 0);
}

// ---------------------------------
// 盒模型
// ---------------------------------

.border-box {
  box-sizing: border-box
}

.content-box {
  box-sizing: content-box;
}

// ---------------------------------
// 溢出处理
// ---------------------------------

.over-scroll {
  overflow: scroll;
  -webkit-overflow-scrolling: touch
}

.over-hidden {
  overflow: hidden
}

.over-visible {
  overflow: visible
}

// ---------------------------------
// 圆角
// ---------------------------------

.radius, .radius-base {
  border-radius: $radius-base
}

.radius-small {
  border-radius: $radius-small;
}

.radius-large {
  border-radius: $radius-large
}

.radius-circle {
  border-radius: $radius-circle
}

// ---------------------------------
// 阴影
// ---------------------------------

.shadow, .shadow-base {
  box-shadow: $shadow-base
}

.shadow-small {
  box-shadow: $shadow-small
}

.shadow-extra {
  box-shadow: $shadow-large
}