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

  @include font-sans;

  color: $color-gray-60;
  font-size: 20px;
  line-height: 1.4;
  padding: 25px 40px;
  position: relative;

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

  p {
    @include p2;
  }

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

  &.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 {
      color: $color-gray-40;
      cursor: pointer;
      font-size: 20px;
      margin-right: 10px;
      margin-top: -20px;
      opacity: 1;
      position: absolute;
      right: 0;
      text-decoration: none;
      text-shadow: none;
    }

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