/* Translucent colors */
/* Animation definitions */
/**
 * Mixins
 */
/**
 * Default page width mixin
 */
/**
 * Flexbox with flex-flow, justify-content and align-items.
 *
 * @param  {[type]} $direction        [description]
 * @param  {[type]} $wrap             [description]
 * @param  {[type]} $justify-content  [description]
 * @param  {[type]} $align-items      [description]
 * @return {[type]}                   [description]
 */
/**
 * Font size with line-height.
 *
 * @param  {[type]} $size       [description]
 * @param  {[type]} $lineheight [description]
 * @return {[type]}             [description]
 */
/**
 * Button.
 *
 * @param  {[type]} $bg:    red           [description]
 * @param  {[type]} $color: white         [description]
 * @return {[type]}         [description]
 */
/**
 * Font family.
 *
 * @param {[string]} $name
 *  Name of the font-family.
 */
/**
  * Media query mixin.
  *
  * @param  {[type]} $size [description]
  * @return {[type]}        [description]
  */
/**
  * Hover mixin
  *
  * @param  {[type]} $color [description]
  * @param  {[type]} $background-color [description]
  * @return {[type]}        [description]
  */
/**
  * Responsive attribute mixin
  *
  * @param  {[type]} $property [description]
  * @param  {[type]} $default [description]
  * @param  {[type]} $large [description]
  * @param  {[type]} $medium [description]
  * @param  {[type]} $small [description]
  * @return {[type]}        [description]
  */
/**
  * Keyframes
  **/
.status-message {
  margin-bottom: 1.875rem;
  padding: 0.9375rem 0.9375rem 0.9375rem 3.75rem;
  background-repeat: no-repeat;
  background-size: 1.25rem 1.25rem;
  background-position: 1.25rem center;
  background-color: #EEE;
}

.status-message.status-message--error {
  background-image: url("sad.svg");
}

.status-message.status-message--status {
  background-image: url("smile.svg");
}

.status-message.status-message--warning {
  background-image: url("meh.svg");
}