//position
$relative: relative;
$absolute: absolute;
$fixed: fixed;
$hidden: hidden;

/*inline*/
%inline-block {
  display: inline-block;
}

%v-align-m {
  vertical-align: middle;
}

%v-align-t {
  vertical-align: top;
}

%v-align-b {
  vertical-align: bottom;
}

%inline-top {
  @extend %inline-block;
  @extend %v-align-t;
}

%inline-middle {
  @extend %inline-block;
  @extend %v-align-m;
}

%inline-bottom {
  @extend %inline-block;
  @extend %v-align-b;
}

/*flex*/
%flex-box {
  display: -webkit-flex;
  display: flex;
}

%flex-item {
  -webkit-flex: 1;
  flex: 1;
}

// %justify-content{
//   -webkit-justify-content: space-between;
//   justify-content: space-between;
// }
// %align-center{
//   -webkit-align-items:center;
//   align-items:center;
// }

// %flex-center-between{
//   @extend %flex-box;
//   @extend %justify-content;
//   @extend %align-center;
// } 
// %flex-center{
//   @extend %flex-box;
//   @extend %align-center;
// }
// %flex-between{
//   @extend %flex-box;
//   @extend %justify-content;
// }

// %bottom-fixed{
//   position:fixed;
//   bottom:0;
//   left:0;
//   right:0;
//   z-index:940;
// }

/*mixin*/
@mixin flex-content($align: center, $justify: space-between, $direction: row) {
  display: flex;
  align-items: $align;
  justify-content: $justify;
  flex-direction: $direction;
}

@mixin inline-vertical-content($location: middle) {
  display: inline-block;
  vertical-align: $location;
}

/*border radius*/
@mixin radius($radius: 2px) {
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

/*modoule-width*/
@mixin module-width($module-width: 91.5%) {
  width: $module-width;
}

/*modoule-height*/
@mixin module-height($module-height: .4) {
  height: $module-height + rem;
}

/*modoule-line-height*/
@mixin line-height($heightValue: .4) {
  line-height: $heightValue + rem;
}