//        ___                  ___                   ___
//       /__/\      ___       /__/|      ___        /__/\
//      |  |::\    /  /\     |  |:|     /  /\       \  \:\
//      |  |:|:\  /  /:/     |  |:|    /  /:/        \  \:\
//    __|__|:|\:\/__/::\   __|__|:|   /__/::\    _____\__\:\
//   /__/::::| \:\__\/\:\_/__/::::\___\__\/\:\__/__/::::::::\
//   \  \:\~~\__\/  \  \:\/\ ~\~~\::::/  \  \:\/\  \:\~~\~~\/
//    \  \:\         \__\::/  |~~|:|~~    \__\::/\  \:\  ~~~
//     \  \:\        /__/:/   |  |:|      /__/:/  \  \:\
//      \  \:\       \__\/    |  |:|      \__\/    \  \:\
//       \__\/                |__|/                 \__\/
//
// Mixins are used to include common functionality in components.
// Use these over placeholders even when no variables are required:
// `@extends` is more trouble than it's worth, and proper compression
// mostly solves the problem of duplicated markup from mixins.

//    ___ ___ ___ ___ _      ___   __
//   |   \_ _/ __| _ \ |    /_\ \ / /
//   | |) | |\__ \  _/ |__ / _ \ V /
//   |___/___|___/_| |____/_/ \_\_|
//
// =========================================================
// Placeholders providing common display/ positioning patterns.

@mixin composite-layer {
  backface-visibility: hidden;
}

@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

@mixin center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

@mixin cover-all {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

@mixin remove-browser-styling {
  -webkit-appearance: none;
  -moz-appearance: none;
}



//    _____ ___  _   _  ___ _  _
//   |_   _/ _ \| | | |/ __| || |
//     | || (_) | |_| | (__| __ |
//     |_| \___/ \___/ \___|_||_|
//
// ======================================================
// Placeholders to help with touch devices.

@mixin touch-scroll {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}



//    _______   _____ ___
//   |_   _\ \ / / _ \ __|
//     | |  \ V /|  _/ _|
//     |_|   |_| |_| |___|
//
// ======================================================
// Placholders to add nice features to text content.

@mixin word-wrap {
  word-break: break-word;
  hyphens: auto;
}

@mixin ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}