.no-transition {
  transition: none !important;
}

.hide.hide.hide {
  display: none;
}

$padding-base-vertical:           6px !default;
$padding-base-horizontal:         12px !default;

$padding-large-vertical:          10px !default;
$padding-large-horizontal:        16px !default;

$padding-small-vertical:          5px !default;
$padding-small-horizontal:        10px !default;

$border-radius-base:              4px !default;
$border-radius-large:             6px !default;
$border-radius-small:             3px !default;


// Content Padding
// --------------------------------------------------

$content-padding:    10px !default;


.padding,
.padding > .scroll-content {
  padding: $content-padding;
}

.padding-top,
.padding-vertical {
  padding-top: $content-padding;
}

.padding-right,
.padding-horizontal {
  padding-right: $content-padding;
}

.padding-bottom,
.padding-vertical {
  padding-bottom: $content-padding;
}

.padding-left,
.padding-horizontal {
  padding-left: $content-padding;
}


// Focus Outline
// --------------------------------------------------
// When a keydown event happens, from a tab key, then the
// 'key-input' class is added to the body element so focusable
// elements have an outline. On a mousedown or touchstart
// event then the 'key-input' class is removed.

:focus,
:active {
  outline: none;
}

.key-input {

  :focus {
    outline-offset: -1px;
    outline: thin dotted;
  }

  .button:focus {
    outline-offset: -2px;
    outline: 2px solid red;
  }

}