papercss/src/components/_alerts.scss

.alert {
  @include border-style();
  border: 2px solid $primary;
  margin-bottom: 20px;
  padding: 15px;
  width: 100%;

  &.dismissible {
    @include transition;
    -webkit-box-pack: justify;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    max-height: 48rem;
    opacity: 1;
    overflow: hidden;
  }

  .btn-close {
    @include transition;
    color: lighten($primary, 10%);
    cursor: pointer;
    margin-left: 1rem;

    &:hover,
    &:active,
    &:focus {
      color: darken($primary, 10%);
    }
  }
}

@each $colorName, $color, $color-light in $colors {
  .alert-#{$colorName} {
    background-color: $color-light;
    border-color: $color;
    color: $color;

    .btn-close {
      color: lighten($color, 10%);
      
      &:hover,
      &:active,
      &:focus {
        color: darken($color, 10%);
      }
    }
  }
}

.alert-state {
  display: none;

  &:checked+.dismissible {
    border-width: 0;
    margin: 0;
    max-height: 0;
    opacity: 0;
    padding-bottom: 0;
    padding-top: 0;
  }
}