.flash-messages {
  margin-top: 15px;
  margin-bottom: 15px;
}

.flash,
.flash-global {
  position: relative;
  font-size: 14px;
  line-height: 1.6;
  color: #246;
  background-color: #e2eef9;
  border: solid 1px #bac6d3;

  &.flash-warn {
    color: #4c4a42;
    background-color: #fff9ea;
    border-color: #dfd8c2;
  }

  &.flash-error {
    color: #911;
    background-color: #fcdede;
    border-color: #d2b2b2;
  }

  .flash-close {
    float: right;
    padding: 17px;     // bigger hit area
    margin-top: -15px; // negative margins to account for bigger padding
    margin-right: -15px;
    margin-left: 20px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    opacity: 0.6;

    &:hover {
      opacity: 1;
    }
  }

  p:last-child {
    margin-bottom: 0;
  }

  // Flashes can have an action button instead of the cross.
  .flash-action {
    float: right;
    margin-top: -4px;
    margin-left: 20px;
  }

  // Make links stand out
  a {
    font-weight: bold;
  }
}

.flash {
  padding: 15px;
  border-radius: 3px;

  + .flash { margin-top: 5px; }
}

// Add an icon
.flash-with-icon {
  padding-left: 40px;

  > .octicon {
    float: left;
    margin-top: 3px;
    margin-left: -25px;
  }
}


// Global notices
//
// Useful for site-wide banners and global notifications.

.flash-global {
  padding: 10px;
  margin-top: -1px;
  border-width: 1px 0;

  h2,
  p {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 1.4;
  }

  // Global flashes can have an action buttons too.
  .flash-action {
    margin-top: 5px;
  }
}

// Content within flash messages.
.flash-title {
  margin-top: 0;
  margin-bottom: 5px;
}