.c-icon {
  color: $text;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  -webkit-user-select: none;
  user-select: none;

  &::before {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  &.c-icon__round {
    border-radius: 100%;
  }

  &.c-icon__background {
    &::before {
      font-size: 60%;
    }
  }

  &.c-icon__white {
    color: #fff;
  }

  &.c-icon__primary {
    color: $primary;
  }

  &.c-icon__success {
    color: $success;
  }

  &.c-icon__warning {
    color: $warning;
  }

  &.c-icon__danger {
    color: $danger;
  }
}