// alerts-badges.scss.erb

// ALERT STYLES
// ------------

// Base alert styles
.alert {
  padding: 8px 35px 8px 14px;
  margin-bottom: $baseLineHeight;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  background-color: $warningBackground;
  border: 1px solid $warningBorder;
  @include border-radius(4px);
  color: $warningText;
}
.alert-heading {
  color: inherit;
}

// Adjust close link position
.alert .close {
  position: relative;
  top: -2px;
  right: -21px;
  line-height: 18px;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  float: right;
  font-size: 20px;
  font-weight: bold;
  line-height: 20px;
  color: $grayDark;
  text-shadow: 0px 1px 0px rgb(255, 255, 255);
  opacity: 0.5;

  &:hover {
    color: $black;
  }
}

// Alternate styles
// ----------------

.alert-success {
  background-color: $successBackground;
  border-color: $successBorder;
  color: $successText;
}
.alert-danger, .alert-error {
  background-color: $errorBackground;
  border-color: $errorBorder;
  color: $errorText;
}
.alert-info {
  background-color: $infoBackground;
  border-color: $infoBorder;
  color: $infoText;
}
// Zero State Banner
// Appears when there is nothing to show in a list or other part of the interface
.alert-zero {
  background-color: $zeroBackground;
  border-color: $zeroBorder;
  color: $zeroText;
  @include box-shadow(inset 0px 3px 3px $zeroBorder);
}


// Block alerts
// ------------------------
.alert-block {
  padding-top: 14px;
  padding-bottom: 14px;
}
.alert-block > p, .alert-block > ul {
  margin-bottom: 0;
}
.alert-block p + p {
  margin-top: 5px;
}
.alert-block p.alert-heading {
  font-weight: bold;
}
.alert-banner, .alert-removeborder {
  @extend .alert-block;
  @include border-radius(0px);
  margin-bottom: 0px;
}

.badge {
  @include border-radius(2px);
  background: $concerto-blue-4;
  color: $white;
  font-family: $sans-body;
  display: inline;
  font-size: 10px;
  font-weight: bold;
  padding: 1px 4px;

  &.action {
    background-color: $red;
  }

  &.muted {
    background-color: $grayLight;
  }
}

.link-hl .badge {
  position: relative;
  bottom: 2px;
  margin-right: 3px;
}

// Flash Notice Banner
// Only appears for a short time to show flash[:notice] text 
// Appears to "slide" from behind the top menu, then slide back up
#flash-banner {
  background: $black;
  opacity: 0.8;
  
  // initial state: is rendered at top of screen behind the topbar
  position: absolute;
  width: 100%;
  top: 0px;
  left: 0px;
  z-index: 1;
  
  p {
    padding: 4px 12px;
    opacity: 1.0;
    color: $white;
    margin-bottom: 0px;
  }
}


// Zero State Well
// Appears when there is nothing to show in a list
.zero-well {

}