//
//width&height
//
.md-btn {
  text-align: center;
}

.md-btn,
.md-check,
.md-input ~ label,
.w-16,
.w-20,
.w-24,
.w-32,
.w-48,
.w-56, .w-8 {
  display: inline-block
}

.w {
  &-24, &-32, &-40, &-48, &-56 {
    @extend .md-btn;
  }

  @each $key in (8, 16, 20, 24, 32, 40, 48, 56, 64, 80, 96, 128) {
    &-#{$key} {
      width: #{$key}px;
      @if $key <64 {
        height: #{$key}px;
      }
      @if $key == 40 {
        display: inline-block;
      }
    }
  }

  @each $key, $val in $width-sizes {
    $keyName: if($key == null, $key, -#{$key});
    &#{$keyName} {
      width: $val;
    }
  }

  @each $key, $val in (lg:xl, md:lg, xs:sm) {
    @media (max-width: map-get($media-max-breakpoints, $val)) {
      &-auto-#{$key} {
        width: auto;
      }
      &-full-#{$key} {
        width: 100%
      }
    }
  }
}

.h {
  @each $key, $val in $height-sizes {
    $keyName: if($key == null, $key, -#{$key});
    &#{$keyName} {
      height: $val;
    }
  }
}

@media (max-width:map-get($media-max-breakpoints,'md')) {
  .display-1 {
    font-size: 4.5rem
  }

  .display-2 {
    font-size: 4rem
  }

  .display-3 {
    font-size: 3rem
  }

  .display-4 {
    font-size: 2rem
  }

  .w-auto-sm {
    width: auto
  }

  .w-full-sm {
    width: 100%
  }
}