alert

[data-message] css

Style for user message notifications

[data-message] {
  @include corners;
  @include shadow;
  align-items: stretch;
  animation: fadeIn $time 1 backwards;
  background-color: color('background');
  display: flex;
  margin: size('half-shim');
  max-width: 90vw;
  position: relative;
  transition: opacity $time;
  width: size('activities');

  &.closed,
  &.closed-timeout {
    opacity: 0;
  }

  [data-btn-id='close'] {
    position: absolute;
    right: 0;
    top: 0;
  }
}
You did it! You win all the style guides!