//
// Utility classes
// --------------------------------------------------
// @todo Clean up and document all utility classes

.sr-only {
  @include visually-hidden;
}

.sr-only-focusable {
  @include visually-hidden--focusable;
}

.no-margin {    margin: 0; }
.margin-left-s {margin-left: 5px;}
.margin-left-m {
  margin-left: 10px;

  [dir='rtl'] & {
    margin-left: 0;
    margin-right: 10px;
  }

}
.margin-left-l {margin-left: 20px;}
.margin-left-xl {margin-left: 30px;}

.margin-bottom-s {      margin-bottom: 5px; }
.margin-bottom-m {  	  margin-bottom: 10px; }
.margin-bottom-l {	    margin-bottom: 20px; }
.margin-bottom-xl {	    margin-bottom: 30px; }
.margin-top-s {	        margin-top: 5px; }
.margin-top-m {	        margin-top: 10px; }
.margin-top-l {	        margin-top: 20px; }
.margin-top-xl {	      margin-top: 30px; }
.margin-top-xxl {	      margin-top: 40px; }

.no-padding { padding: 0 !important;}
.padding-xs { padding: 6px; }
.padding-sm { padding: 12px; }
.padding-md { padding: 24px; }
.padding-lg { padding: 48px; }
.no-side-padding { padding: 24px 0; }

.no-border { border: 0 !important;}

.inline-center {
  vertical-align: middle;
  line-height: 1;
  margin-right: 5px;
}

.align-center {
  align-self: center;
}

// can be used on anchor that need to display as a block
.block {
  display: block;
}

// Pushpin
.pin-top, .pin-bottom {
  position: relative;
}
.pinned {
  position: fixed !important;
}

.ruler-sm {
  margin: ($line-height-computed / 2.5) 0;
}

// Responsive images (ensure images don't scale beyond their parents)
.img-responsive {
  @include img-responsive;
}

.img-bordered {
  border: 3px solid white;
}

.img-elevated {
  display: inline-block;
  @include z-depth-3;
}

p + p .img-elevated {
  margin-top: -0.5rem; // not too much space between text and image
}

// Perfect circle
.img-circle {
  border-radius: 50%; // set radius in percents
}

img.align-left {
  float: left;
  margin-right: 1em;
  margin-bottom: 1em;
}

img.align-right {
  float: right;
  margin-left: 1em;
  margin-bottom: 1em;
}

img.align-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Image sizes for in posts and streams
.img-medium {
  width: 44px;
  height: 44px;
}

// Image sizes for in navbar
.img-small {
  width: 24px;
  height: 24px;
}

.img-grid {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: $padding-large-vertical;

  img {
    margin: 3px;
  }
}

// Floats
// -------------------------

.clearfix {
  @include clearfix;
}
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.pull-right {
  float: right !important;

  [dir='rtl'] & {
    float: left !important;
  }
}
.pull-left {
  float: left !important;

  [dir='rtl'] & {
    float: right !important;
  }
}


// Toggling content
// -------------------------

// Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1
.js .js-hide,
.js-show,
.hide {
  display: none !important;
}

.js .js-show,
.show {
  display: block !important;
}
.invisible {
  visibility: hidden;
}

.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.visually-hidden {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  height: 1px;
  width: 1px;
  word-wrap: normal;
}


// Hide from screenreaders and browsers
//
// Credit: HTML5 Boilerplate

.hidden {
  display: none !important;
}


.hidden-for-phone-only {
  @include for-phone-only {
    display: none;
  }
}


.list-inline {
  padding-left: 0;
  list-style: none;
}

.list-inline-item {
  display: inline-block;
}

.list-inline-item:not(:last-child) {
  margin-right: 5px;
}

//
// Responsive: Utility classes
// --------------------------------------------------


// IE10 in Windows (Phone) 8
//
// Support for responsive views via media queries is kind of borked in IE10, for
// Surface/desktop in split view and for Windows Phone 8. This particular fix
// must be accompanied by a snippet of JavaScript to sniff the user agent and
// apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at
// our Getting Started page for more information on this bug.
//
// For more information, see the following:
//
// Issue: https://github.com/twbs/bootstrap/issues/10497
// Docs: http://getbootstrap.com/getting-started/#support-ie10-width
// Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/

@at-root {
  @-ms-viewport {
    width: device-width;
  }
}
