@buffer-none: 0px;
@buffer-sm:   5px;
@buffer-md:   10px;
@buffer-lg:   22px;

.padding-none         { padding: @buffer-none !important; }
.padding              { padding: @buffer-md !important; }
.padding-sm           { padding: @buffer-sm !important; }
.padding-lg           { padding: @buffer-lg !important; }

.padding-top-none     { padding-top: @buffer-none !important; }
.padding-top          { padding-top: @buffer-md !important; }
.padding-top-sm       { padding-top: @buffer-sm !important; }
.padding-top-lg       { padding-top: @buffer-lg !important; }

.padding-right-none   { padding-right: @buffer-none !important; }
.padding-right        { padding-right: @buffer-md !important; }
.padding-right-sm     { padding-right: @buffer-sm !important; }
.padding-right-lg     { padding-right: @buffer-lg !important; }

.padding-bottom-none  { padding-bottom: @buffer-none !important; }
.padding-bottom       { padding-bottom: @buffer-md !important; }
.padding-bottom-sm    { padding-bottom: @buffer-sm !important; }
.padding-bottom-lg    { padding-bottom: @buffer-lg !important; }

.padding-left-none    { padding-left: @buffer-none !important; }
.padding-left         { padding-left: @buffer-md !important; }
.padding-left-sm      { padding-left: @buffer-sm !important; }
.padding-left-lg      { padding-left: @buffer-lg !important; }

.margin-none          { margin: @buffer-none !important; }
.margin               { margin: @buffer-md !important; }
.margin-sm            { margin: @buffer-sm !important; }
.margin-lg            { margin: @buffer-lg !important; }

.margin-top-none      { margin-top: @buffer-none !important; }
.margin-top           { margin-top: @buffer-md !important; }
.margin-top-lg        { margin-top: @buffer-lg !important; }
.margin-top-sm        { margin-top: @buffer-sm !important; }

.margin-right-none    { margin-right: @buffer-none !important; }
.margin-right         { margin-right: @buffer-md !important; }
.margin-right-lg      { margin-right: @buffer-lg !important; }
.margin-right-sm      { margin-right: @buffer-sm !important; }

.margin-bottom-none   { margin-bottom: @buffer-none !important; }
.margin-bottom        { margin-bottom: @buffer-md !important; }
.margin-bottom-lg     { margin-bottom: @buffer-lg !important; }
.margin-bottom-sm     { margin-bottom: @buffer-sm !important; }

.margin-left-none     { margin-left: @buffer-none !important; }
.margin-left          { margin-left: @buffer-md !important; }
.margin-left-lg       { margin-left: @buffer-lg !important; }
.margin-left-sm       { margin-left: @buffer-sm !important; }

.border-left-none     { border-left: none !important; }
.border-right-none    { border-right: none !important; }
.border-bottom-none   { border-bottom: none !important; }
.border-top-none      { border-top: none !important; }

.display-block { display: block; } // use to swap an anchor tag to span a whole row to make click target larger
.no-underline:hover { text-decoration: none; }
.clickable { cursor: pointer; }
.strong { font-weight: bold; }
.em { font-style: italic; }
.small { font-size: 85%; } // Ex: 14px base font * 85% = about 12px
.no-link { color: @gray-dark; }

.text-sans-serif { font-family: @font-family-sans-serif; }
.text-ellipsis { .text-overflow(); } // truncates text to a single line with an ellipsis at the end
.text-default {
  font-family: @font-family-base;
  font-size: @font-size-base;
  line-height: @line-height-base;
  font-weight: normal;
}
.text-hilite {
  color: @link-color;
  &:hover {
    color: @link-hover-color;
    text-decoration: underline;
  }
}
.text-strike { text-decoration: line-through; }
.text-upper { text-transform: uppercase; }
.text-lower { text-transform: lowercase; }