//
// Floats
//
.clearfix {
  @include clearfix();
}

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

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .float#{$infix}-left  { float: left !important; }
    .float#{$infix}-right { float: right !important; }
    .float#{$infix}-none  { float: none !important; }
  }
}

//
// Positions
//
.position-absolute {
  position: absolute;
}
.position-static {
  position: static;
}
.position-relative {
  position: relative;
}

//
// Overflow
//
.overflow-hidden {
  overflow: hidden;
}

//
// Align
//
.align-baseline { vertical-align: baseline !important; } // Browser default
.align-top { vertical-align: top !important; }
.align-middle { vertical-align: middle !important; }
.align-bottom { vertical-align: bottom !important; }
.align-text-bottom { vertical-align: text-bottom !important; }
.align-text-top { vertical-align: text-top !important; }

//
// Display utilities
//

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .d#{$infix}-none         { display: none !important; }
    .d#{$infix}-inline       { display: inline !important; }
    .d#{$infix}-inline-block { display: inline-block !important; }
    .d#{$infix}-block        { display: block !important; }
    .d#{$infix}-table        { display: table !important; }
    .d#{$infix}-table-cell   { display: table-cell !important; }
    .d#{$infix}-flex         { display: flex !important; }
    .d#{$infix}-inline-flex  { display: inline-flex !important; }
  }
}

// Flex variation
//
// Custom styles for additional flex alignment options.

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .flex#{$infix}-first     { order: -1; }
    .flex#{$infix}-last      { order: 1; }
    .flex#{$infix}-unordered { order: 0; }

    .flex#{$infix}-row            { flex-direction: row !important; }
    .flex#{$infix}-column         { flex-direction: column !important; }
    .flex#{$infix}-row-reverse    { flex-direction: row-reverse !important; }
    .flex#{$infix}-column-reverse { flex-direction: column-reverse !important; }

    .flex#{$infix}-wrap         { flex-wrap: wrap !important; }
    .flex#{$infix}-nowrap       { flex-wrap: nowrap !important; }
    .flex#{$infix}-wrap-reverse { flex-wrap: wrap-reverse !important; }

    .justify-content#{$infix}-start   { justify-content: flex-start !important; }
    .justify-content#{$infix}-end     { justify-content: flex-end !important; }
    .justify-content#{$infix}-center  { justify-content: center !important; }
    .justify-content#{$infix}-between { justify-content: space-between !important; }
    .justify-content#{$infix}-around  { justify-content: space-around !important; }

    .align-items#{$infix}-start    { align-items: flex-start !important; }
    .align-items#{$infix}-end      { align-items: flex-end !important; }
    .align-items#{$infix}-center   { align-items: center !important; }
    .align-items#{$infix}-baseline { align-items: baseline !important; }
    .align-items#{$infix}-stretch  { align-items: stretch !important; }

    .align-content#{$infix}-start   { align-content: flex-start !important; }
    .align-content#{$infix}-end     { align-content: flex-end !important; }
    .align-content#{$infix}-center  { align-content: center !important; }
    .align-content#{$infix}-between { align-content: space-between !important; }
    .align-content#{$infix}-around  { align-content: space-around !important; }
    .align-content#{$infix}-stretch { align-content: stretch !important; }

    .align-self#{$infix}-auto     { align-self: auto !important; }
    .align-self#{$infix}-start    { align-self: flex-start !important; }
    .align-self#{$infix}-end      { align-self: flex-end !important; }
    .align-self#{$infix}-center   { align-self: center !important; }
    .align-self#{$infix}-baseline { align-self: baseline !important; }
    .align-self#{$infix}-stretch  { align-self: stretch !important; }
  }
}

.flex-child-default {
  flex: 1 0 auto;
  min-height: 1px;
}

.flex-child-0 {
  flex: 0 0 auto;
  min-height: 1px;
}

//
// Screenreaders
//

// Only display content to screen readers
//
// See: http://a11yproject.com/posts/how-to-hide-content

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

// Use in conjunction with .sr-only to only display content when it's focused.
//
// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
//
// Credit: HTML5 Boilerplate

.sr-only-focusable {
  &:active,
  &.active,
  &:focus,
  &.focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
  }
}

//
// Visibility utilities
//

.invisible {
  visibility: hidden !important;
}

// Responsive visibility utilities

@each $bp in map-keys($grid-breakpoints) {
  .hidden-#{$bp}-up {
    @include media-breakpoint-up($bp) {
      display: none !important;
    }
  }
  .hidden-#{$bp}-down {
    @include media-breakpoint-down($bp) {
      display: none !important;
    }
  }
}

//
// Animations class
//
.fade {
  opacity: 0;
  transition: opacity .15s linear;
  &.in {
    opacity: 1;
  }
}

.collapse {
  display: none;
  &.show {
    display: block;
  }
  // tr&.in    { display: table-row; }
  // tbody&.in { display: table-row-group; }
}

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  transition-timing-function: ease;
  transition-duration: .6s;
  transition-property: height;
}

.picture-hover-zoom {
  display: block;
  &:hover {
    .picture {
      img {
        transform: translateZ(0) scale(1.1, 1.1);
      }
    }
  }
  .picture {
    max-width: 100%;
    overflow: hidden;
    transform: translateZ(0);
    img {
      height: auto;
      max-width: 100%;
      transform: translateZ(0) scale(1, 1);
      transition: all .4s ease-out;
    }
  }
}

.picture-hover-glow {
  display: block;
  @include hover-focus {
    .picture {
      &:before {
        left: 0;
        transform: translate(-200%, 0);
        transition: all .4s cubic-bezier(.32, .84, .96, .71);
      }
    }
  }
  .picture {
    overflow: hidden;
    position: relative;
    &:before {
      background: rgba($white, .2);
      content: "";
      display: block;
      filter: blur(5px);
      height: 100%;
      left: 100%;
      position: absolute;
      top: 0;
      transform: translate(200%, 0%);
      transition: all .2s cubic-bezier(.32, .84, .96, .71);
      width: 20%;
      z-index: 2;
    }
  }
}

//
// Links
//
.link-wrapper {
  color: inherit;
  &:hover, &:active, &:focus {
    color: inherit;
  }
  &.link-hover-underlined:after {
    background: $body-color;
  }
}

.link-hover-underlined {
  position: relative;
  &:after {
    background: currentColor;
    bottom: 0;
    content: "";
    height: 1px;
    left: 50%;
    opacity: 0;
    position: absolute;
    right: 50%;
    transition: all 400ms ease-out;
  }
  &:hover {
    &:after {
      left: 0;
      opacity: 1;
      right: 0;
    }
  }
}

//
// Border-radius
//

.rounded {
  @include border-radius($border-radius);
}
.rounded-top {
  @include border-top-radius($border-radius);
}
.rounded-right {
  @include border-right-radius($border-radius);
}
.rounded-bottom {
  @include border-bottom-radius($border-radius);
}
.rounded-left {
  @include border-left-radius($border-radius);
}

.rounded-circle { border-radius: 50%; }

// Margin and Padding

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    @each $prop, $abbrev in (margin: m, padding: p) {
      @each $size, $lengths in $spacers {
        $length-x: map-get($lengths, x);
        $length-y: map-get($lengths, y);

        .#{$abbrev}#{$infix}-#{$size}  { #{$prop}:        $length-y $length-x !important; }
        .#{$abbrev}t#{$infix}-#{$size} { #{$prop}-top:    $length-y !important; }
        .#{$abbrev}r#{$infix}-#{$size} { #{$prop}-right:  $length-x !important; }
        .#{$abbrev}b#{$infix}-#{$size} { #{$prop}-bottom: $length-y !important; }
        .#{$abbrev}l#{$infix}-#{$size} { #{$prop}-left:   $length-x !important; }
        .#{$abbrev}x#{$infix}-#{$size} {
          #{$prop}-right: $length-x !important;
          #{$prop}-left:  $length-x !important;
        }
        .#{$abbrev}y#{$infix}-#{$size} {
          #{$prop}-top:    $length-y !important;
          #{$prop}-bottom: $length-y !important;
        }
      }
    }

    // Some special margin utils
    .m#{$infix}-auto  { margin:        auto !important; }
    .mt#{$infix}-auto { margin-top:    auto !important; }
    .mr#{$infix}-auto { margin-right:  auto !important; }
    .mb#{$infix}-auto { margin-bottom: auto !important; }
    .ml#{$infix}-auto { margin-left:   auto !important; }
    .mx#{$infix}-auto {
      margin-right: auto !important;
      margin-left:  auto !important;
    }
    .my#{$infix}-auto {
      margin-top:    auto !important;
      margin-bottom: auto !important;
    }
  }
}

// Dimensions
.h-100 {
  height: 100% !important;
}

.w-100 {
  width: 100% !important;
}

// Responsive embed
.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;

  .embed-responsive-item,
  iframe,
  embed,
  object,
  video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
}

.embed-responsive-21by9 {
  padding-bottom: percentage(9 / 21);
}

.embed-responsive-16by9 {
  padding-bottom: percentage(9 / 16);
}

.embed-responsive-4by3 {
  padding-bottom: percentage(3 / 4);
}

.embed-responsive-1by1 {
  padding-bottom: percentage(1 / 1);
}

//
// Close button
//
.close {
  color: $close-color;
  cursor: pointer;
  display: inline-block;
  font-size: 1.375rem;
  font-style: normal;
  line-height: 1;
  opacity: .5;
  position: relative;
  text-align: center;
  transition: opacity 200ms ease-in-out;
  @include hover-focus {
    color: $close-color;
    text-decoration: none;
    opacity: 1;
  }
}

// Additional properties for button version
// iOS requires the button element instead of an anchor tag.
// If you want the anchor version, it requires `href="#"`.
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
button.close {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  appearance: none;
}