/**
* Name: Helpers
* Author: Symbiosys
*/

/* margins & paddings
*****************
*/
$max: 10;

$pm: (
	l: left,
	r: right,
	t: top,
	b: bottom
);

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

@each $side, $pad in $pm {
	@for $i from 0 through $max {
		.p#{$side}-#{$i} {
      padding-#{$pad}: $i / 2 + rem;
      
      @include breakpoint(sm) {
        padding-#{$pad}: $i + rem;
      }
    }
	}
}
@for $i from 0 through $max {
  .px-#{$i} {
    padding: 0 $i / 2 + rem;
    
    @include breakpoint(sm) {
      padding: 0 $i + rem;
    }
  }
  .py-#{$i} {
    padding: $i / 2 + rem 0;
    
    @include breakpoint(sm) {
      padding: $i + rem 0;
    }
  }
}

@each $side, $marg in $pm {
	@for $i from 0 through $max {
		.m#{$side}-#{$i} {
      margin-#{$marg}:  $i / 2 + rem;
      
      @include breakpoint(sm) {
        margin-#{$marg}: $i + rem;
      }
    }
	}
}
@for $i from 0 through $max {
  .mx-#{$i} {
    margin: 0 $i / 2 + rem;
    
    @include breakpoint(sm) {
      margin: 0 $i + rem;
    }
  }
  .my-#{$i} {
    margin: $i / 2 + rem 0;
    
    @include breakpoint(sm) {
      margin: $i + rem 0;
    }
  }
}

/* block display
*****************
*/
$displays: block, inline, inline-block;
@each $display in $displays {
	.os-#{$display} { display: $display !important; }
}

/* block position
*****************
*/
$positions: sticky, absolute, relative, fixed;
@each $position in $positions {
	.os-#{$position} { position: $position !important; }
}

/* code
*****************
*/
pre, code {
  max-width: 100%;
  display: block;
  padding: 0 !important;
  background: $os-light;
  border-radius: $os-radius;
  white-space: pre-wrap !important;
  text-align: justify !important;

}
code {
  background: $os-light;
  border-radius: $os-radius;
  padding: .2rem;
  display: inline-block;
  vertical-align: middle;
}

@for $i from 10 through 100 {
  .h-#{$i} {
    height: #{$i + '%'};
  }
}
@for $i from 10 through 100 {
  .w-#{$i} {
    width: #{$i + '%'};
  }
}

.vh-100 {
  @include breakpoint(sm) {
    height: calc(100vh - #{$navbar-height});
  }
}

// float / align
$floats: left right;
@each $float in $floats {
  .align-#{$float} {
    float: $float;
  }
}

// font-weight
$weights: (
  black: 900,
  bold: 600,
  light: 300
);

@each $w, $weight in $weights {
  .font-weight-#{$w} {
    font-weight: $weight;
  }
}

// visibility
.hidden-sm-down {
  display: none !important;
}
@include breakpoint(sm) {
  .hidden-sm-down {
    display: block !important;
  }
  .hidden-sm {
    display: none !important;
  }
}
@include breakpoint(md) {
  .hidden-sm {
    display: block !important;
  }
  .hidden-md {
    display: none !important;
  }
}
@include breakpoint(lg) {
  .hidden-md {
    display: block !important;
  }
  .hidden-lg {
    display: none !important;
  }
}