.alert {
  @include     font-sans;
  font-size:   20px;
  line-height: 1.4;
  padding:     25px 40px;
  color:       $color-gray-60;
  position:    relative;

  ul, ol {
    margin:    0;
    font-size: 16px;
  }

  p {
    @include p2;
  }

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

  $color-gray-transparent-equivalent: rgb(235, 232, 232);
  $color-green-transparent-equivalent: rgb(229, 241, 240);
  $color-red-transparent-equivalent: rgb(251, 222, 216);

  &.alert-info {
    background-color: $color-gray-transparent-equivalent;
  }

  &.alert-success {
    background-color: $color-green-transparent-equivalent;
  }

  &.alert-warning, &.alert-danger {
    background-color: $color-red-transparent-equivalent;
  }

  &.alert-neutral {
    background: $color-gray-10;
    color:      $color-gray-60;
    padding:    28px;
    .close {
      position:        absolute;
      right:           0;
      margin-right:    10px;
      font-size:       20px;
      color:           $color-gray-40;
      opacity:         1;
      text-shadow:     none;
      margin-top:      -20px;
      text-decoration: none;
      cursor:          pointer;
    }

    h2 {
      color:     $color-green;
      font-size: 20px;
      margin:    0 0 10px 0;
    }
  }
}
