@import '../../global';
@import '../../mixins/typography.scss';

.message {
  @include action_small;

  display: block !important;

  height: auto !important;
  max-height: none;

  text-align: center;

  padding: $padding;
  margin-bottom: $push;

  $themes: 'primary', 'success', 'warning', 'danger';

  @each $theme in $themes {
    &__#{$theme} {
      background-color: color($theme);
      color: color('white');
    }
  }

  &_closeable {
    margin-bottom: $push-sm;

    display: flex;
    justify-content: flex-end;
  }
}