@import '../../../../lib/assets/javascripts/new-dashboard/styles/variables';

.NotificationBadge {
  display: inline-flex;
  align-items: center;
  margin: 0 1em 30px;
  padding: 0.4em 1em;
  border-radius: 30px;
  font-size: 12px;

  &--info {
    background-color: rgba($info__bg-color, 0.2);

    .NotificationBadge__icon {
      background-image: url($assetsDir + '/images/info-icon.svg');
    }
  }

  &--warning {
    background-color: rgba($warning__bg-color, 0.2);

    .NotificationBadge__icon {
      background-image: url($assetsDir + '/images/warning-icon.svg');
    }
  }

  &.no-margin {
    margin: 0;
  }

  &__icon {
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
  }
}