// 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; }
