Cacher is the code snippet organizer for pro developers

//
// Mixins
//

// Type
@mixin font-primary {
  font-family: 'FS Elliot Web Bold', 'FS Elliot Web Regular', 'Arial', arial, sans-serif;
}
@mixin font-regular {
  font-family: 'FS Elliot Web Regular', 'Arial', arial, sans-serif;
}

// Clearfix
@mixin clearfix {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

// Makes an element visually hidden, but accessible.
// @see http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
@mixin element-invisible {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

// Turns off the element-invisible effect.
@mixin element-invisible-off {
  position: static !important;
  clip: auto;
  height: auto;
  width: auto;
  overflow: auto;
}

// Makes an element visually hidden by default, but visible when focused.
@mixin element-focusable {
  @include element-invisible;

  &:active,
  &:focus {
    @include element-invisible-off;
  }
}

// Helper function for working with Sass maps.
// Example: @include print($configuration);
@mixin print($declarations) {
  @each $property, $value in $declarations {
    #{$property}: $value;
  }
}

//
//      Align mixins
//
// vertical align mixin
@mixin vertical-align($position: relative) {
  display: block;
  position: $position;
  top: 50%;
  transform: translateY(-50%);
}

// horizontal align mixin
@mixin horizontal-align($position: relative) {
  display: inline-block;
  left: 50%;
  position: $position;
  transform: translateX(-50%);
}

// center align mixin
@mixin center-align($position: relative) {
  display: block;
  left: 50%;
  position: $position;
  top: 50%;
  transform: translate(-50%, -50%);
}

//
//      Linear gradient
//
@mixin linear-gradient($direction: left, $color: $color-white, $percentage: 60%) {
  background-image: linear-gradient(to $direction, transparent, $color $percentage);
}

//
//      Layout mixins
//
@mixin max-width {
  margin: 0 auto;
  max-width: 1600px;
  width: 100%;
}

@mixin layout-content {
  max-width: 95%;
  width: auto;
  margin: 0 auto;

  @include breakpoint($screen-xl-min) {
    max-width: 1140px;
  }
}

@mixin top-bottom-spacing($mob: 30px, $desk: 60px) {
  margin-top: $mob;
  margin-bottom: $mob;

  @include breakpoint($screen-md-min) {
    margin-top: $desk;
    margin-bottom: $desk;
  }
}

@mixin fiftyfifty {
  display: flex;
  flex-direction: column;

  @include breakpoint($screen-md-min) {
    flex-direction: row;
    justify-content: space-between;
  }

  > div {
    width: 100%;

    &:first-of-type {
      margin: 0 0 4rem;
    }

    @include breakpoint($screen-md-min) {
      width: calc(50% - 2rem);

      &:first-of-type {
        margin: 0 2rem 0 0;
      }
    }
  }
}

@mixin flex-media {
  display: flex;
  flex-direction: column-reverse;

  @include breakpoint($screen-md-min) {
    flex-direction: row;
  }

  > div {
    width: 100%;

    &:first-of-type {
      margin: 0 0 4rem;
    }

    @include breakpoint($screen-md-min) {
      width: calc(50% - 0.5rem);

      &:first-of-type {
        width: 50%;
        margin: 0 0.5rem 0 0;
      }
    }
  }
}

//
// Image crop center.
//
@mixin image-crop($height: 100%) {
  height: $height;
  overflow: hidden;
  position: relative;
  width: 100%;

  picture,
  img {
    height: 100%;
    left: 50%;
    max-width: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
  }
}

//
// Apply styles to :hover, :focus, :focus-within, and .focus-within.
//
//  IE11 and Edge ignore any rule block with a pseudoclass they don't understand.
//  When using a polyfill that gives those browsers .focus-within wherever modern
//  ones have :focus-within, the rules have to be divided into two separate blocks.
//
@mixin focus-within {
  // Selectors IE and Edge can understand.
  &:hover,
  &:focus,
  &.focus-within {
    @content;
  }

  // Selector that breaks IE and Edge.
  &:focus-within {
    @content;
  }
}