/* Table of Contents
==================================================
# Variables
# Alert
# Styles
# Colors
# Media Queries */

/* # Variables
================================================== */
$onblack-colors: (
  dark-haze: $color-dark-haze,
  haze: $color-haze,
  light-haze: $color-light-haze
);
$ongray-colors: (
  white: $color-white
);
$onwhite-colors: (
  dark-black: $color-dark-black,
  black: $color-black,
  light-black: $color-light-black,
  dark-gray: $color-dark-gray,
  gray: $color-gray,
  light-gray: $color-light-gray,
  lime: $color-lime,
  green: $color-green,
  teal: $color-teal,
  blue: $color-blue,
  indigo: $color-indigo,
  purple: $color-purple,
  pink: $color-pink,
  red: $color-red,
  orange: $color-orange,
  yellow: $color-yellow,
  alert: $color-red,
  error: $color-red,
  warning: $color-yellow,
  success: $color-green
);

/* # Alert
================================================== */
.alert {
  background: $color-gray;
  border-bottom: 1px solid darken($color-gray, 5%);
  box-sizing: border-box;
  color: $color-white;
  display: block;
  font-size: 16px;
  line-height: 20px;
  margin: 0;
  padding: 12px 20px 9px 20px;
  width: 100%;
}
.alert > a {
  border-bottom: 1px dotted $color-white;
  color: $color-white;
  font-style: italic;
}
.alert > .alert-close {
  border: 0;
  float: right;
  font-size: 18px;
  line-height: 23px;
}

/* # Styles
================================================== */
.alert-bordered {
  border: 1px solid darken($color-gray, 5%);
  padding-bottom: 10px;
  padding-top: 10px;
}
.alert-fixed {
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1050;
}

/* # Colors
================================================== */
@each $name, $color in $onblack-colors {
  .alert-#{$name} {
    background: $color;
    border-color: darken($color, 5%);
    color: $color-dark-black;
  }
  .alert-#{$name} > a {
    border-bottom-color: $color-black;
    color: $color-dark-black;
  }
  .alert-#{$name} .alert-close { color: $color-dark-black; }
}
@each $name, $color in $ongray-colors {
  .alert-#{$name} {
    background: $color;
    border-color: darken($color, 5%);
    color: $color-gray;
  }
  .alert-#{$name} > a {
    border-bottom-color: $color-gray;
    color: $color-gray;
  }
  .alert-#{$name} .alert-close { color: $color-gray; }
}
@each $name, $color in $onwhite-colors {
  .alert-#{$name} {
    background: $color;
    border-color: darken($color, 5%);
  }
}

/* # Media Queries
================================================== */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
  .alert { border-width: 0.5px; }
}