// Shorthand margin and padding utility classes from Bootstrap v4-dev
//
// <p class="m-b-0">I am a paragraph that needs no bottom margin</p>
// The classes are named using the format: {property}-{sides}-{size}
// TODO: Remove once we upgrade to Bootstrap 4
//
// Copyright (c) 2011-2016 Twitter, Inc.

// Variables

@spacer-x: 20px;
@spacer-y: 20px;

// Margin

.m-x-auto {
  margin-right: auto !important;
  margin-left: auto !important;
}

.m-a-0 {
  margin: 0 0 !important;
}
.m-t-0 {
  margin-top: 0 !important;
}
.m-r-0 {
  margin-right: 0 !important;
}
.m-b-0 {
  margin-bottom: 0 !important;
}
.m-l-0 {
  margin-left: 0 !important;
}
.m-x-0 {
  margin-right: 0 !important;
  margin-left: 0 !important;
}
.m-y-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.m-a-1 {
  margin: @spacer-y @spacer-x !important;
}
.m-t-1 {
  margin-top: @spacer-y !important;
}
.m-r-1 {
  margin-right: @spacer-x !important;
}
.m-b-1 {
  margin-bottom: @spacer-y !important;
}
.m-l-1 {
  margin-left: @spacer-x !important;
}
.m-x-1 {
  margin-right: @spacer-x !important;
  margin-left: @spacer-x !important;
}
.m-y-1 {
  margin-top: @spacer-y !important;
  margin-bottom: @spacer-y !important;
}

.m-a-2 {
  margin: (@spacer-y * 1.5) (@spacer-x * 1.5) !important;
}
.m-t-2 {
  margin-top: (@spacer-y * 1.5) !important;
}
.m-r-2 {
  margin-right: (@spacer-x * 1.5) !important;
}
.m-b-2 {
  margin-bottom: (@spacer-y * 1.5) !important;
}
.m-l-2 {
  margin-left: (@spacer-x * 1.5) !important;
}
.m-x-2 {
  margin-right: (@spacer-x * 1.5) !important;
  margin-left: (@spacer-x * 1.5) !important;
}
.m-y-2 {
  margin-top: (@spacer-y * 1.5) !important;
  margin-bottom: (@spacer-y * 1.5) !important;
}

.m-a-3 {
  margin: (@spacer-y * 3) (@spacer-x * 3) !important;
}
.m-t-3 {
  margin-top: (@spacer-y * 3) !important;
}
.m-r-3 {
  margin-right: (@spacer-x * 3) !important;
}
.m-b-3 {
  margin-bottom: (@spacer-y * 3) !important;
}
.m-l-3 {
  margin-left: (@spacer-x * 3) !important;
}
.m-x-3 {
  margin-right: (@spacer-x * 3) !important;
  margin-left: (@spacer-x * 3) !important;
}
.m-y-3 {
  margin-top: (@spacer-y * 3) !important;
  margin-bottom: (@spacer-y * 3) !important;
}

// Padding

.p-a-0 {
  padding: 0 0 !important;
}
.p-t-0 {
  padding-top: 0 !important;
}
.p-r-0 {
  padding-right: 0 !important;
}
.p-b-0 {
  padding-bottom: 0 !important;
}
.p-l-0 {
  padding-left: 0 !important;
}
.p-x-0 {
  padding-right: 0 !important;
  padding-left: 0 !important;
}
.p-y-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.p-a-1 {
  padding: @spacer-y @spacer-x !important;
}
.p-t-1 {
  padding-top: @spacer-y !important;
}
.p-r-1 {
  padding-right: @spacer-x !important;
}
.p-b-1 {
  padding-bottom: @spacer-y !important;
}
.p-l-1 {
  padding-left: @spacer-x !important;
}
.p-x-1 {
  padding-right: @spacer-x !important;
  padding-left: @spacer-x !important;
}
.p-y-1 {
  padding-top: @spacer-y !important;
  padding-bottom: @spacer-y !important;
}

.p-a-2 {
  padding: (@spacer-y * 1.5) (@spacer-x * 1.5) !important;
}
.p-t-2 {
  padding-top: (@spacer-y * 1.5) !important;
}
.p-r-2 {
  padding-right: (@spacer-x * 1.5) !important;
}
.p-b-2 {
  padding-bottom: (@spacer-y * 1.5) !important;
}
.p-l-2 {
  padding-left: (@spacer-x * 1.5) !important;
}
.p-x-2 {
  padding-right: (@spacer-x * 1.5) !important;
  padding-left: (@spacer-x * 1.5) !important;
}
.p-y-2 {
  padding-top: (@spacer-y * 1.5) !important;
  padding-bottom: (@spacer-y * 1.5) !important;
}

.p-a-3 {
  padding: (@spacer-y * 3) (@spacer-x * 3) !important;
}
.p-t-3 {
  padding-top: (@spacer-y * 3) !important;
}
.p-r-3 {
  padding-right: (@spacer-x * 3) !important;
}
.p-b-3 {
  padding-bottom: (@spacer-y * 3) !important;
}
.p-l-3 {
  padding-left: (@spacer-x * 3) !important;
}
.p-x-3 {
  padding-right: (@spacer-x * 3) !important;
  padding-left: (@spacer-x * 3) !important;
}
.p-y-3 {
  padding-top: (@spacer-y * 3) !important;
  padding-bottom: (@spacer-y * 3) !important;
}

// Borders

.b-a-0 {
  border: none !important;
}
.b-a-1 {
  border: 1px solid @trim !important;
}
.b-t-1 {
  border-top: 1px solid @trim !important;
}
.b-r-1 {
  border-right: 1px solid @trim !important;
}
.b-b-1 {
  border-bottom: 1px solid @trim !important;
}
.b-l-1 {
  border-left: 1px solid @trim !important;
}

// Clear

.c-b {
  clear: both;
}
.c-l {
  clear: left;
}
.c-r {
  clear: right;
}