.status_icon {
  color: #fff;
  border-radius: 100px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;

  @include rem(width, 64px);
  @include rem(height, 64px);
  @include color-modifier(background);

  &:before {
    font-family: 'icon' !important;
    line-height: 1;
    display: inline-block;
    position: relative;
    top: -1px;
    vertical-align: middle;

    @include rem(font-size, 28px);
    @include rem(line-height, 64px);
  }

  &--success {
    background-color: $green;

    &:before {
      content: "\e90b";
    }
  }

  &--warning {
    background: $yellow url(../img/attention.svg) no-repeat center;

    @include background-size(cover);

    &:before {
      content: "";
    }
  }
}