// Alerts
//
// Located in `wyrm_core/_alert.sass`. Alerts can exist as in page notices and as fixed drops.
//
// Markup:
// <div class="wy-alert {$modifiers}">
//  <div class="wy-alert-title">Title goes here</div>
//  <p>Alert instructions go here.</p>
// </div>
//
// .wy-alert-neutral        - Generic alert, extra instruction.
// .wy-alert-success        - Hooray, something good happened.
// .wy-alert-warning        - Watch out, you might make a mistake.
// .wy-alert-danger         - Yep, you made a mistake.
//
// Styleguide 2

.wy-alert
  padding: $base-line-height / 2
  line-height: $base-line-height
  margin-bottom: $base-line-height
  background: lighten($blue, 50%)
  +font-smooth
.wy-alert-title
  color: $white
  font-weight: bold
  display: block
  color: $white
  background: lighten($blue,20%)
  margin: -$base-line-height / 2
  padding: $base-line-height / 4 $base-line-height / 2
  margin-bottom: $base-line-height / 2

.wy-alert.wy-alert-danger
  background: lighten($red, 40%)
  .wy-alert-title
    background: lighten($red,20%)
.wy-alert.wy-alert-warning
  background: lighten(orange,40%)
  .wy-alert-title
    background: lighten($orange,20%)

.wy-alert.wy-alert-info
  background: lighten($blue, 50%)
  .wy-alert-title
    background: lighten($blue,20%)

.wy-alert.wy-alert-success
  background: lighten($offgreen, 50%)
  .wy-alert-title
    background: lighten($offgreen,0%)

.wy-alert.wy-alert-neutral
  background: $table-stripe-color
  .wy-alert-title
    color: $text-color
    background: $table-border-color
  a
    color: $link-color

.wy-alert p:last-child
  margin-bottom: 0

// System alerts
//
// These alerts should trigger when a form error or something happens.
// Because these docs are auto-generated know that these alerts
// **will not output** below because they are set to
// display: none by default.
//
// Markup:
// <ul class="wy-tray-container">
//  <li class="{$modifiers}">Alert instructions go here.</li>
// </ul>
//
// .wy-tray-item-info       - Generic alert, extra instruction.
// .wy-tray-item-success    - Hooray, something good happened.
// .wy-tray-item-warning    - Watch out, you might make a mistake.
// .wy-tray-item-danger     - Yep, you made a mistake.
//
// Styleguide 2.1


.wy-tray-container
  position: fixed
  bottom: 0px
  left: 0
  z-index: $z-index-alert
  li
    display: block
    width: $nav-desktop-width
    background: transparent
    color: $white
    text-align: center
    box-shadow: 0 5px 5px 0 rgba(0,0,0,.1)
    padding: 0 $base-line-height
    min-width: 20%
    opacity: 0
    height: 0
    line-height: 56px
    overflow: hidden
    +transition(all .3s ease-in)
    &.wy-tray-item-success
      background: $green
    &.wy-tray-item-info
      background: $blue
    &.wy-tray-item-warning
      background: $orange
    &.wy-tray-item-danger
      background: $red
    &.on
      opacity: 1
      height: 56px

+media($tablet)
  .wy-tray-container
    bottom: auto
    top: 0
    width: 100%
    li
      width: 100%

