// Table of Contents
// ==================================================
// Alert
// Colors
// Styles
// Media Queries

// Alert
// ==================================================
.alert {
  background: color(light-haze);
  border: 0;
  border-bottom-width: 1px;
  border-style: solid;
  border-color: color(light-haze);
  box-sizing: border-box;
  color: color(steel);
  display: block;
  padding: 13px 20px;
  width: 100%;

  .alert-close {
    float: right;
    margin-left: 15px;
  }

  &.absolute,
  &.floating,
  &.fixed,
  &.toaster { z-index: 2060; }
  &.absolute {
    position: absolute;
    width: inherit;
  }
  &.fixed,
  &.floating,
  &.toaster { position: fixed; }
  &.fixed {
    right: 0;
    top: 0;

    &.bottom {
      bottom: 0;
      top: auto;
    }
  }
  &.floating {
    right: 160px;
    top: 50px;
    width: calc(100% - 320px);

    &.bottom { bottom: 50px; }
  }
  &.toaster {
    right: 15px;
    top: 50px;
    width: 270px;

    &.bottom-left,
    &.bottom-right {
      bottom: 50px;
      top: auto;
    }
    &.bottom-left,
    &.top-left {
      right: auto;
      left: 15px;
    }
  }
}

// Colors
// ==================================================
@each $name, $color in $colors {
  .alert-color-#{$name} {
    background: color($name);
    border-color: color($name);
    color: text-color-on($name);

    &.alert-outline {
      border-color: color($name);
      color: color($name);
    }
  }
}

// Styles
// ==================================================
.alert-border {
  border-radius: border-radius(b);
  border-width: 1px;
}
.alert-outline { background: color(transparent); }

// Media Queries
// ==================================================
@media only screen and (max-width: breakpoint-max-width(s)) {
  .alert {
    &.floating,
    &.toaster {
      right: 10px;
      top: 26px;
      width: calc(100% - 20px);

      &.bottom {
        bottom: 26px;
        top: auto;
      }
    }
    &.toaster {
      &.bottom-left,
      &.bottom-right { bottom: 26px; }
      &.bottom-left,
      &.top-left { left: 10px; }
    }
  }
}