@for $i from 1 through 10 {
  .is-vh-#{$i}0 {
    height: #{$i * 10}vh;
  }

  .is-vw-#{$i}0 {
    width: #{$i * 10}vh;
  }
}

@include mobile() {
  $base-margin-padding: 0.25rem;
}

@mixin generate-spacing($space-type) {
  // Generate overall spacing
  .#{$space-type}{
    #{$space-type}: #{$base-margin-padding} !important;
  }
  @each $size, $space in $spacing-maps {
    .#{$space-type}--#{$size} {
      @if $size != "none" {
        #{$space-type}: calc(#{$base-margin-padding} * #{$space}) !important;
      }
      @else {
        #{$space-type}: 0 !important;
      }
    }
  }
  // Generate position spacing
  @each $position in $position-maps {
    .#{$space-type}--#{$position} {
      #{$space-type}-#{$position}: #{$base-margin-padding} !important;
      @each $size, $space in $spacing-maps {
        &--#{$size} {
          @if $size != "none" {
            #{$space-type}-#{$position}: calc(#{$base-margin-padding} * #{$space}) !important;
          } 
          @else {
            #{$space-type}-#{$position}: 0 !important;
          }
        }
      }
    }
  }
}

@include generate-spacing(padding);
@include generate-spacing(margin);

.no-padding {
  @extend .padding--none;
}
.no-margin {
  @extend .margin--none;
}

.is-offset-sidenav {
  position: fixed;
  width: 22%;
  top: 40px;
  .touch & {
    @extend .is-position-relative;
    width: 100%;
  }
}