/**

  @alerts
---------------------------------------------------------
  modules/_alerts.scss
--------------------------------------------------------

  Alerts are UI elements that give important info

  Example: Error
  <div class="alert alert--error">
    <a href="#" class="btn__close">&times;</a>
    <p>Uh oh - something went wrong</p>
  </div>

  Example: Warning
  <div class="alert alert--warning">
    <a href="#" class="btn__close">&times;</a>
    <p>Shake it fast, but watch yourself.</p>
  </div>

  Example: Success
  <div class="alert alert--success">
    <a href="#" class="btn__close">&times;</a>
    <p>The secret to my success is that I learn, 25 hours a day!</p>
  </div>

  Example: Info
  <div class="alert alert--info">
    <a href="#" class="btn__close">&times;</a>
    <p>Did you ever know that you're my hero?</p>
  </div>

  NOTE: The code below uses declared color units, if you'd
        prefer, declare those as variables in _vars.scss

------------------------------------------------------ */


.alert {
  position: relative;
  border-width: 1px;
  border-style: solid;
  margin-bottom: 2*$unit;
  padding: .5rem 4rem .5rem .5rem;
  line-height: 1.25;

  // text
  p {
    margin: 0;
  }

  // Close buttons in alert
  .btn__close {
    position: absolute;
    top: 50%;
    margin-top: -.75em;
    right: 1em;
    opacity: .5;
    -webkit-transition: all .3s;
    transition: all .3s;
    text-decoration: none;
    &:hover {
      opacity: 1;
    }
  }

}




// Error alert
//
.alert--error {
  color: #e04646;
  border-color: #e04646;
  background: #ffe6e6;
  // Color of close button
  .btn__close {
    color: #e04646;
  }
  // Color of line {
  &:after {
    border-color: #e04646;
  }
}



// Warning alert
//
.alert--warning {
  color: #b29804;
  border-color: #b29804;
  background: #fcf7d8;
  // Color of close button
  .btn__close {
    color: #b29804;
  }
  // Color of line {
  &:after {
    border-color: #b29804;
  }
}



// Info alert
//
.alert--info {
  color: #537df6;
  border-color: #537df6;
  background: #e8f3ff;
  // Color of close button
  .btn__close {
    color: #537df6;
  }
  // Color of line
  &:after {
    border-color: #537df6;
  }
}



// Success alert
//
.alert--success {
  color: #0ca129;
  border-color: #0ca129;
  background: #dafce1;
  // Color of close button
  .btn__close {
    color: #0ca129;
  }
  // Color of line
  &:after {
    border-color: #0ca129;
  }
}